作者：钱宝坤

标准参考

根据 CSS 2.1 规范标准，’float‘ 特性可以拥有的值为 'left'| 'right' | 'none' | 'inherit' ，默认值为 ’none'。

具体信息可参考：9.5.1 Positioning the float: the 'float' property

如果 CSS 特性以及特性值出现书写错误，导致非法值或未知属性产生，客户端浏览器将必须忽略带有未知属性或非法值的样式声明。

具体信息可参考 CSS 2.1 规范： 4.2 Rules for handling parsing errors

因此，如果 'float' 特性设置中出现除 'left'| 'right' | 'none' | 'inherit' 以外的值，此 'float' 样式声明将被浏览器忽略。

问题描述

在 Safari Chrome 等使用 webkit 渲染引擎的浏览器中，'float:center' 是合法值，他等同于 'float:none' 设置，而其他浏览器则认为 ‘float’ 特性中 'center' 是个非法值，遵循规范应忽略此处的 'float' 特性设置。

造成的影响

可能造成页面局部布局错位，以及使用脚本得到某布局块计算后样式时，webkit 渲染引擎浏览器结果与其他浏览器不符，使具体程序出现意料外的 Bug。

受影响的浏览器

Chrome Safari

问题分析

根据规范定义，’float‘ 特性可以拥有的值为 'left'| 'right' | 'none' | 'inherit' ，并没有 'center'。

浏览器如果遇到错误的 CSS 特性值会将此样式忽略，但在使用 webkit 渲染引擎的 Safari Chrome 浏览器中，'float:center' 这个不合法值被特意修正为合法值 'none'。

这个问题出现在 webkit 源文件 CSSParser.cpp 中，问题部分如下：

bool CSSParser::parseValue(int propId, bool important) { ... case CSSPropertyFloat: // left | right |
                none | inherit + center for buggy CSS if (id == CSSValueLeft || id ==
                CSSValueRight || id == CSSValueNone || id == CSSValueCenter) validPrimitive =
                true; break; ... }

通过源代码可看出，webkit 中特意在 'float' 特性可用值中加入 'center'，用以修复页面作者误用 'center' 值时产生的 Bug。

分析如下代码：

<style> p {float:right;color:#EEE;} </style> <script>
                window.onload=function(){ var pElement = document.getElementsByTagName('p')[0];
                if(!window.getComputedStyle){ window.getComputedStyle=function($target){ return $target.currentStyle; };
                } pElement.appendChild( document.createTextNode('float:' + ( getComputedStyle(pElement,null)['cssFloat']
                || getComputedStyle(pElement,null)['styleFloat'] ) ) ); } </script> <p style="float:center;background:gray;"></p>

样式文件中首选为 P 标记制指定了 'float:right' 样式，其后的内联 "style" 属性又试图将之前定义的 'float' 特性值覆盖为 'center'。由于 'cetner' 特性值不合法，浏览器将忽略整个 'float' 样式。这样此例中 P 标记计算后样式应为最初定义的 ‘float:right’。

各浏览器运行结果如下：

	IE Firefox Opera	Chrome Safari
P	'float:right'	'float:none'

可见，实际应用中，'center' 值的确被 Safari Chrome 认为合法，并将其解析为 'float:none' 值。

解决方案

避免使用非法的 'float' 特性值。

参见

知识库

• ...

相关问题

• ...