IE5对宽度width属性的解析问题的解决方法

2023-10-25 13:55:10

问题：IE5对于width的解析是width+padding+border

比如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE5 width 问题 </title>
<style>
.sidebar {
    width: 200px;
    padding: 20px;
    border: 10px solid #CCC;
}
</style>
</head>
<body>
<div class="sidebar">这是内容这是内容这是内容这是内容这是内容这是内容这是内容</div>
</body>
</html>

IE5效果	其他

可以看到，IE5中width(200px)=内容+padding+border；而其他浏览器是width=内容。

解决方法：

对IE5 for Windows来说，则需要把宽度指定为260px（230+20×2+10×2）,接着再以200px覆盖回来，让符合标准的浏览器得到正确的宽度。

即代码改为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>IE5 width 问题 </title>
<style>
.sidebar {
    padding: 20px;
    border: 10px solid #CCC;
    width: 260px; /* for IE5/Win */
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 200px; /* actual value */
}
</style>
</head>
<body>
<div class="sidebar">这是内容这是内容这是内容这是内容这是内容这是内容这是内容</div>
</body>
</html>

这样所有浏览器显示都是一样的了：

voice-family: "\"}\"";的作用

#centercontent {
                 background-color: #006600;
                   background-image: url(../img/home_main_bg.gif);
                   background-repeat: repeat-x;
                   height: 502px;
                   width: 772px;
                   margin-top: 0px;
                   margin-right: auto;
                  margin-bottom: 0px;
                   margin-left: auto;
                   border: 1px solid #006600;
                   voice-family: "\"}\"";
                   voice-family: inherit;
                   height: 500px;
                   width: 770px;

}

        在此设定宽度为770PX，边框为1PX，但在Window IE5.5以前的浏览器中浏览页面时，main层宽度会比实际宽度少2px（770px-1px-1px）,因此需要予以纠正，在此就介绍一种纠正方法。此处利用了样式表的“层叠”特性，对于同一个选择符的相同属性，后定义的值会覆盖前面定义的值。

        而"voice-family:"\"}\"" ;voice-family:inherit;" 是CSS的语音属性，由于Window IE5.5不完全支持CSS2，不识别此属性，因此跳到下一个选择符。

        IE5并不能正确读取voice-family: “\”}\”"; voice-family:inherit;这两段，所以在读取第二个Width前就放弃读取#centercontent了。

        这样便能在同一个Class里定义两个Width值。（而实际上这是重复定义的典型，不过并不会在其他浏览器产生问题。）

另一种不用voice-family: "\"}\"";的方法来解决：

width: 770px
width /**/: 772px;

-----摘自http://hi.baidu.com/qiufengzixun/item/99cb44980fc78c3c336eeb25------

IE5对宽度width属性的解析问题的解决方法

码农公寓

voice-family: "\"}\"";的作用

相关文章