總結CSS的瀏覽器兼容問題及解決方法
來源：程序員人生 發布時間：2013-10-19 06:11:49 閱讀次數：3577次
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相加）
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
