webkit rtl 绝对位置错误？

【问题标题】：webkit rtl absolute position bug?webkit rtl 绝对位置错误？
【发布时间】：2011-06-15 13:46:39
【问题描述】：

html:

<div id="outer">
    <div id="inner">
    </div>
</div>

css:

#outer {
    position: absolute;
    left: 100px;
    top: 0;
    width: 100px;
    height: 100px;
    direction: rtl;
    background-color: blue;
}
#inner {
    display: inline-block;
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: yellow;
}

在 Chrome 中，黄色框位于蓝色框之外。

在其他浏览器（firefox、IE）中，黄框在蓝框内。

这是 webkit 的 bug，为什么？

jsfiddle 上的一个测试用例： http://jsfiddle.net/QF9tT/

【问题讨论】：

标签： css google-chrome webkit right-to-left

【解决方案1】：

您应该简单地从#inner 中删除display: inline-block。

见：http://jsfiddle.net/QF9tT/1/

position: absolute 将强制计算 display 值为 block，因此 display: inline-block 不应该做任何事情：

http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo

否则，如果 'position' 有值 'absolute' 或 'fixed'，框是绝对定位，..，和显示根据下表设置。

[inline-block = 块]

但是，在这种情况下，这种行为在 Chrome 中似乎存在问题。

您应该考虑在此处提交报告：http://code.google.com/p/chromium/issues/list

再说一遍，这个问题很容易解决：不要在绝对定位的元素上指定无意义的 display 值。

【讨论】：