作者：丁宗秋

标准参考

关于 'width' 属性的说明请参照 W3C CSS 2.1 规范： http://www.w3.org/TR/CSS21/visudet.html#propdef-width

关于 'height' 属性的说明请参照 W3C CSS 2.1 规范： http://www.w3.org/TR/CSS21/visudet.html#propdef-height

问题描述

各浏览器对于计算后宽度和高度为含有小数的长度值时，其最终值会不一致。

造成的影响

制作精确到像素级的页面布局将在宽高上与设计要求有小出入。

受影响的浏览器

所有浏览器

问题分析

在 W3C 标准规范中没有明确说明当 <length> 值中包含小数时应该如何处理，也没有明确说明 <percentage> 值是计算是参考包含块尺寸的计算值还是实际使用值。

分析以下代码：

<div style="width:303px;background-color:green;"> <div
                style="width:78%;background-color:red;">303 x 78% = 236.34</div> </div>
                <br/> <div style="width:303px;background-color:green;"> <div
                style="width:87%;background-color:red;">303 x 87% = 263.61</div> </div>

IE6 IE7 IE8 Firefox	百分比宽度实际使用值 = 四舍五入（计算值）
Chrome Safari Opera	百分比宽度实际使用值 = 取整 （计算值）

 

分析以下代码：

<div style="width:303px;background-color:green;"> <div
                style="width:87%;background-color:red;"> <div
                style="width:84%;background-color:yellow;">220 or 221 or 222</div> </div>
                </div>

IE6 IE7 IE8(Q) Chrome Safari Opera	百分比宽度计算是基于其包含块 width 的实际使用值
Firefox IE8(S)	百分比宽度计算是基于其包含块 width 的计算值

 

综上情况可以看出，对于 <length> 值中包含小数和 <percentage> 值是计算是参考包含块尺寸的计算值还是实际使用值这两个问题，不同浏览器有不同的处理方式。

解决方案

如果页面需要精确到像素级的话，建议为宽高属性指定整型值。

参见

知识库

• ...

相关问题

• ...