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了。基本的理解是,IE计算宽度(width)的方式不同。基于w3c标准,一个元素总宽度应该是: 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right 但是,IE计算宽度时没有加上填充和边框: 总宽度 = margin-left + width + margin-right
更多的细节,请参考这个链接:Internet Explorer和CSS盒模型详细解释
解决方法:
使用w3c的标准兼容模式。IE6或者之后的版本能基于w3c的标准计算,但是你仍旧会在IE5中遇到问题。
或者你可以用CSS Hack来解决这个问题。所有标准兼容的浏览器都能读取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。谢谢观看
经典论坛交流: http://bbs.blueidea.com/thread-2984076-1-1.html
本文链接:http://www.blueidea.com/tech/web/2010/7589.asp
出处:蓝色理想
责任编辑:bluehearts
上一页 10个糟糕的IE Bug及其修复 [2] 下一页
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|