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;
}

In Chrome, the yellow box is outside of the blue box.

In other browers(firefox, IE), the yellow box is inside the blue box.

Is it a bug of webkit, and why?

a test case on jsfiddle:
http://jsfiddle.net/QF9tT/

Answer 1

You should simply remove display: inline-block from #inner.

See: http://jsfiddle.net/QF9tT/1/

position: absolute will force a computed display value of block, so display: inline-block should not be doing anything whatsoever:

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

Otherwise, if ‘position’ has the value
‘absolute’ or ‘fixed’, the box is
absolutely positioned, .., and display
is set according to the table below.

[inline-block = block]

But, it appears in this case that this behaviour is buggy in Chrome.

You should consider filing a report here: http://code.google.com/p/chromium/issues/list

Then again, the issue is easy to fix: don’t specify a nonsensical display value on an absolutely positioned element.