webkit rtl絕對位置錯誤？

Question

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/

Answer 1

您應該簡單地從#inner刪除display: inline-block。

參見：http://jsfiddle.net/QF9tT/1/

position: absolute將強制block一個計算display值，所以display: inline-block不應該做任何責任：

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

否則，如果 '位置' 有價值 '絕對'或'固定'，框是 絕對p根據下表設置提示，..，並顯示 。

[直列塊=塊]

但是，它出現在這種情況下，這種行爲是在鉻馬車。

你應該考慮在這裏提交的報告：http://code.google.com/p/chromium/issues/list

話又說回來，這個問題很容易解決：沒有絕對定位的元素上指定一個無意義的display值。