DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> DIV+CSS Padding在Firefox與IE下效果不同的解決方法
DIV+CSS Padding在Firefox與IE下效果不同的解決方法
編輯:CSS詳解     

CSS padding屬性有很多值得學習的地方,在不同的浏覽器中效果也不盡相同,這裡和大家分享一下在Firefox與IE下DIV+CSS Padding效果不同的解決方法。

在Firefox與IE下DIV+CSS Padding效果不同的解決方法

CSS padding屬性簡介

首先我們來看一下CSS padding屬性簡介,CSS padding屬性定義元素的內邊距。padding屬性接受長度值或百分比值,但不允許使用負值。

例如,如果您希望所有h1元素的各邊都有10像素的內邊距,只需要這樣:

h1{padding:10px;}您還可以按照上、右、下、左的順序分別設置各邊的內邊距,各邊均可以使用不同的單位或百分比值:

  1. h1{padding:10px0.25em2ex20%;}

問題:

  1. <div style="padding-top:5px;width:200px;height:15px;
  2. background-color:#ffeeee">
  3. test
  4. </div>

以上代碼在IE中和Firefox會有不同的效果.最主要原因是Firefox解釋padding-top與IE的效果不同

Firefox對DIV總高度是padding-top+height的,而IE中,padding-top是包含在height中的,要解決這一個矛盾,可以利用!important

  1. padding-top:5px;
  2. height:10px !important;
  3. height:15px;

以上定義了兩個height, 其中一個後面加了!important , IE將會忽略這個屬性,而使用後面的height:15px; 而Firefox卻不會忽略這個屬性, 直接使用height:10px,這樣就可以很巧妙的解決這個問題。

【編輯推薦】

  1. CSS+DIV網站設計時常見四大問題
  2. IE6.0對padding的解讀分析
  3. 揭露CSS中margins折疊現象內幕
  4. DIV+CSS開發XHtml網頁對SEO優化的影響
  5. DIV CSS網頁布局中對段落進行排版的方法
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved