css相容性問題經驗總結

來源:互聯網
上載者:User
css相容性問題經驗總結,水平有限,如果哪裡不對,希望指正啊。

都是很早以前寫的,水平有限,如果哪裡不對,希望指正啊。

IE的問題:

一.雙邊距問題
浮動元素的外邊距會加倍,但與第一個浮動元素相鄰的其他浮動元素外邊距不會加倍。
解決方案:在此浮動元素增加樣式  display:inline;

二.圖片產生的間隙
父元素直接包含<img>,這個圖片下方會和父元素邊緣產生間隙。
解絕方法:1.在原始碼中讓</div>和<img>在同一行,因為那個間隙是由分行符號產生的。
               2.給<img>添加樣式  display:block;

三.最小高度問題
塊元素最小高度為10px,當高度定義小於10px時,仍為10px;
解決方案:為此塊元素添加樣式  overflow:hidden;   或   讓此款塊元素的字型大小等於此會元素的高度。

四.列表的li為浮動,則列表後面的元素不能換行的問題
列表的li為浮動,則列表後面的元素不能換行。
解決方案:為這個ul定義合適的高或給包含這個ul 的父div定義合適的高。

五.子項目的上下外邊界問題(父元素沒有定義高度時)
在父元素沒有定義高度時,子項目的上下外邊界和父元素上下外邊界疊加,並且顯示在父元素外面。
解決方案:給父元素定義內邊距或邊框。

firefox問題:

一.列表的li為浮動,則列表後面的元素不能換行的問題
列表的li為浮動,則列表後面的元素不能換行。
解決方案:為這個ul定義合適的寬高或給包含這個ul 的父div定義合適的寬高。

二.子項目的上下外邊界問題(父元素沒有定義高度時)
在父元素沒有定義高度時,子項目的上下外邊界和父元素上下外邊界疊加,並且顯示在父元素外面。
解決方案:給父元素定義內邊距或邊框。


二者之間的相容問題:

一.水平置中
IE6:使用text-align不但能使文本置中,還能使嵌套的塊元素置中。
FF2:使用text-align只能使文本置中。
解決方案:在需要置中的塊元素添加margin:0 auto;

二.div高度自適應問題
IE6:如果內容的高度超過父元素的高度,父元素的高度會增加。
FF2 : 如果內容的高度超過父元素的高度,內容不會隱藏,父元素的高度也不會增加。
解決方案:(假定最小高度為50px)在父元素添加  min-height:50px;
                                                                     height:auto !important;
                                                                     height:50px;

三.父元素包含浮動子項目時的高度問題
IE6:高度會被子浮動元素撐開。
FF2:高度不會被子浮動元素撐開。
解決方案:在子浮動元素後面再加一個div,此div的定義:clear:both;
                                                                             line-height:1px;
                                                                             visibility:hidden;

四.嵌套元素邊距高度的疊加問題(定義父元素寬度時)
IE6:子項目的上邊距和父元素的上內邊距疊加。
FF2:子項目的上邊距和父元素的上內邊距相加。
解決方案:單獨使用padding或margin。

五.子項目的上邊距問題  (定義父元素高度時)
IE6:子項目上邊距顯示正常。
FF2:子項目上邊距顯示在父元素上方。
解決方案:在父元素增加overflow:hidden;   或給父元素增加邊框或內邊距。

六.子項目負邊界問題
IE6:超出父元素的部分會被父元素覆蓋。
FF2:超出父元素的部分會覆蓋父元素,但前提是父元素有邊框或內邊距,不然負邊距會顯示在父元素上,使得父元素擁有負邊距。
解決辦法:使用相對定位。

七.列表的預設顯示問題
IE6:列表有左邊界、下邊界、右內邊距,同時項目符號在列表外面。
FF2:列表有上下邊界、左右內邊距、項目符號在列表裡面。
解決方案:為ul添加樣式:margin:0;
                                   padding:0;


八.<body>的預設padding和margin不同的問題。
解決方案:  給body添加樣式:margin:0;
                                          padding:0;   
九.對元素使用絕對位置問題(元素定義外邊距時)
IE6:外邊距不會視為元素的一部分,因此在對此元素使用絕對位置時外邊距無效。
FF2:外邊距會視為元素的一部分,因此在對此元素使用絕對位置時外邊距有效。(例如margin_top會和top相加)



相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.