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/
答案 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
值。