打印

RM1025: Chrome Safari 认为 'float:center' 是合法值且其计算值为 'none'

作者:钱宝坤

标准参考

根据 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' 特性值。

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6
IE7
IE8
Firefox 3.6.10
Chrome 8.0.552.0 dev
Safari 5.0.2 
Opera 10.63
测试页面: webkit_float_center.html
本文更新时间: 2010-10-18

关键字

float left right none inherit center Rules for handling parsing errors webkit