8、:hover偽類(:hover Pseudo Class)
IE只支持<a>元素的 :hover偽類。你可以使用jQuery的hover event來達到相同效果。
解決方法:
/* jQuery Script */ $('#list li').hover(
function () { $(this).addClass('color'); },
function() { $(this).removeClass('color'); } );
/* CSS Style */ .color { background-color:#f00; }
/* HTML */ <ul id="list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
9、盒模型Hack(Box Hack Model)
這是IE里最熱門的bug了;镜睦斫馐牵琁E計算寬度(width)的方式不同。基于w3c標(biāo)準,一個元素總寬度應(yīng)該是: 總寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right 但是,IE計算寬度時沒有加上填充和邊框: 總寬度 = margin-left + width + margin-right
更多的細節(jié),請參考這個鏈接:Internet Explorer和CSS盒模型詳細解釋
解決方法:
使用w3c的標(biāo)準兼容模式。IE6或者之后的版本能基于w3c的標(biāo)準計算,但是你仍舊會在IE5中遇到問題。
或者你可以用CSS Hack來解決這個問題。所有標(biāo)準兼容的瀏覽器都能讀取w\\idth:180px 除了IE5。
#content { padding:10px; border:1px solid; width:200px; w\\idth:180px; }
10、 雙倍邊距bug(Double Margin Bug Fix)
如果你有一個分配有左/右邊距的浮動元素,IE6會使得邊距雙倍化。比如,margin-left:5px 將會變成10px。你可以通過對浮動元素添加display:inline來解決這個問題。
解決方法:
div#content { float:left; width:200px; margin-left:10px;
/* fix the double margin error */ display:inline; }
FIN。謝謝觀看
經(jīng)典論壇交流: http://bbs.blueidea.com/thread-2984076-1-1.html
本文鏈接:http://m.95time.cn/tech/web/2010/7589.asp
出處:藍色理想
責(zé)任編輯:bluehearts
上一頁 10個糟糕的IE Bug及其修復(fù) [2] 下一頁
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準化版塊參加討論,我還想發(fā)表評論。
|