打印

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

作者:丁宗秋

标准参考

关于 '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> 值是计算是参考包含块尺寸的计算值还是实际使用值这两个问题,不同浏览器有不同的处理方式。

解决方案

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

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.5.5
Chrome 4.0.249.22
Safari 4.0.4
Opera 10.60
测试页面: length_and_percentage_value.html
本文更新时间: 2010-07-19

关键字

width height 小数 四舍五入 百分比 percent computed value decimal round ceil floor