webkit rtl绝对位置错误?

时间:2011-06-15 13:46:40

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

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的错误,为什么?

关于jsfiddle的测试用例: http://jsfiddle.net/QF9tT/

1 个答案:

答案 0 :(得分:3)

您只需从display: inline-block删除#inner

请参阅: http://jsfiddle.net/QF9tT/1/

position: absolute会强制计算display block的值,因此display: inline-block不应做任何事情:

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

  

否则,如果'position'具有该值   “绝对”或“固定”,方框是   绝对定位,..,和显示   根据下表设定。

     

[inline-block = block]

但是,在这种情况下,这种行为在Chrome中出现了问题。

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

然后,问题很容易解决:不要在绝对定位的元素上指定无意义的display值。