IE7下莫名其妙的滚动条

沧海依粟 @ 2010-04-23 21:59:00   |  类归于： CSS   |   0 条评论  |  113次阅读

今天又遇到了一个很纠结的问题. 在IE7下, 页面莫名其妙的多了个横向滚动条. 使用开发工具查看是否被哪个该死的元素撑开了, 没有发现异常. 于是只能注释html代码, 定位到引起问题元素, 该元素的样式如下:

.style {

    position: absolute;
    right: 10px;

    bottom: 0px;
    color: #666666;
    font-size: 13px;
    font-style: italic;
}

继续跟进, 在禁用 right 后, 滚动条消失. 想不通 right 属性会对布局产生啥影响, 于是 google 之, 找到这篇文章:http://www.brunildo.org/test/ie7_hscroll.html. 原来又是一个IE7美妙的Bug.

在IE7下, 如果一个没有设置宽度的元素被设置成居右(如设置 right, float:right, text-align:right等属性), 那当它的子元素的位置超出父元素的范围后, IE7就会出现奇怪的横向滚动条.注意, 这里是超过, 而并不将父元素撑开. 如设置属性:margin-left: –1px, 或者像我那样, 将font-style设置成了 italic.

解决办法, 给居右的元素加上 overflow: auto 就好了.

现在还没有评论,你有机会坐沙发哦.

发表一篇评论

呢称：(必填)  //Name(required)

Email 地址：(必填)  //Email Address(required)

网址：//Site URL

验证码：(必填) //Word Verification(required)

请在上面的文本框中输入你在图中看到的字母或数字(看不清楚验证码?点击这里换一个.)
//Please type the letters you see in the picture.(can't read it? try another!)