css瀏覽器不兼容原因分析及解決辦法

更新時間：2008年08月23日 21:04:43 作者：

瀏覽器的不兼容，大家肯定都是深惡痛絕的，往往我們只是去做修補，卻忘了更重要的事情，那就是追溯根源，避免類似的不兼容再次出現(xiàn)。

11.img下的留白，大家看這段代碼有啥問題：

<div>
<img src=”” src=”” />
</div>

把div的border打開，你發(fā)現(xiàn)圖片底部不是緊貼著容器底部的，是img后面的空白字符造成，要消除必須這樣寫

<div>
<img src=”” src=”” /></div>

后面兩個標簽要緊挨著。ie7下這個bug 依然存在。解決方案：給img設定 display:block。

12.失去line-height。<div style=”line-height:20px”><img />文字</div>，很遺憾，在ie6下單行文字 line-height 效果消失了。。。，原因是<img />這個inline-block元素和inline元素寫在一起了。解決方案：讓img 和文字都 float起來。

引申：大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以嘗試去調(diào)整img 和文字讓他們在ie和ff下能一致，你會發(fā)現(xiàn)怎么調(diào)都不會讓你滿意。索性讓img 和文字都 float起來，用margin 調(diào)整。

13.鏈接的hover狀態(tài)。a:hover img{width:300px} 我們想讓鼠標hover時，鏈接里包含的圖片寬度變化，可惜在ie6下無效，ie7、ff下有效。

14.非鏈接的hover狀態(tài)。div:hover{} 這樣的樣式ie6是不認的，在ie7、ff下才有效果。

15.block化的a鏈接，其內(nèi)套absolute層，absolute層內(nèi)放置img，ie下，鼠標點擊img不會有鏈接效果，ff、op下正常。

想不出來了，以后想到再加吧。上面的諸多問題如果你掌握了其中奧妙，90%的不兼容問題不需要另起css hack的。

16.無法徹底清除的float。如果讓ul下的li具有了float屬性，如何clear浮動的li呢？<ul><li class=”c”></li></ul> 或者 <ul><li><div>class=”c”></div></li></ul> 或者 <ul><li></li><div>class=”c”></div></ul> 或者 <ul><li></li></ul><div>class=”c”></div> 或者上述的組合？這個問題，我無法給出解答。下面有個例子與此相關(guān)

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

<style type=text/css>
.c{clear:both;overflow:hidden;+overflow:visible}
.bd{border:1px solid red}

ul.ex{list-style:none;}
ul.ex li{float:left;border:1px solid green;}
</style>
<ul class=ex>
<li>sfsdfsfdf</li>
<li>sfsdfsfdf</li>
</ul>
<div class=c></div>
<div class=bd style=margin-top:19px>sfsdfsfdf</div>

請在ie下測試，僅僅將 margin-top:19px 改為margin-top:20px 你發(fā)現(xiàn)什么了？要素：doctype必須有，ie6、ie7下margin-top:19px還好好的，margin-top:20px 就出問題了，無法解釋。。。大家還可以將 clear 層換不同的位置測試。

解決方案：給ul 屬性zoom:1 （給li 加zoom:1 沒用）

引申：clear層應該單獨使用。也許你為了節(jié)省代碼把clear屬性直接放到下面的一個內(nèi)容層，這樣有問題，不僅僅是ff和op下失去margin效果，ie下某些margin值也會失效
<div style=”background:red;float:left;”>dd</div>
<div style=”clear:both;margin-top:18px;background:green”>ff</div>

17.ie下overflow:hidden對其下的絕對層position:absolute或者相對層position:relative無效。解決方案：給overflow:hidden加position:relative或者position:absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。

18.ie6下嚴重的bug，float元素如沒定義寬度，內(nèi)部如有div定義了height或zoom:1，這個div就會占滿一整行，即使你給了寬度。float元素如果作為布局用或復雜的容器，都要給個寬度的。

19.ie6下的bug，絕對定位的div下包含相對定位的div，如果給內(nèi)層相對定位的div高度height具體值，內(nèi)層相對層將具有100%的width值，外層絕對層將被撐大。解決方案給內(nèi)層相對層float屬性。

20.ie6下的bug，<head></head>內(nèi)有<base target=”_blank”/>的情況下，position:relative層下的float層內(nèi)文字無法選中。這個bug迫使我修公用樣式庫。

21.終于來了個ff的缺點。width:100%這個東西在ie里用很方便，會向上逐層搜索width值，忽視浮動層的影響，ff下搜索至浮動層結(jié)束，如此，只能給中間的所有浮動層加width:100%才行，累啊。opera這點倒學乖了跟了ie。

您可能感興趣的文章: