10个常见的IE bug和解决方法

作者佚名技术来源 CSS技术浏览发布时间 2012-02-24

。

html {
overflow: auto;
}

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。你可

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: 兼容ie6常见问题:10条有效的html和css代码下一篇: IE6在解析浮动:3像素Bug

关于10个常见的IE bug和解决方法的所有评论

随机推荐