快捷導(dǎo)航

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

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

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

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

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

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

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

后面兩個(gè)標(biāo)簽要緊挨著。ie7下這個(gè)bug 依然存在。解決方案：給img設(shè)定 display:block。

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

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

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

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

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

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

16.無法徹底清除的float。如果讓ul下的li具有了float屬性，如何clear浮動(dòng)的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> 或者上述的組合？這個(gè)問題，我無法給出解答。下面有個(gè)例子與此相關(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>

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

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

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

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

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

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

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

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

上一頁 12閱讀全文

您可能感興趣的文章: