webkit rtl绝对位置错误？
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/
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/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您只需从
#inner中删除display: inline-block即可。参见： http://jsfiddle.net/QF9tT/1/
< code>position:absolute 将强制计算出
block的display值，因此display: inline-block不应该执行任何操作无论如何：http://www.w3.org/TR/CSS21/visuren.html #dis-pos-flo
但是，在这种情况下，这种行为在 Chrome 中似乎是有问题的。
您应该考虑在此处提交报告：http://code.google.com/p/chromium /issues/list
再说一遍，这个问题很容易解决：不要在绝对定位的元素上指定无意义的
display值。You should simply remove
display: inline-blockfrom#inner.See: http://jsfiddle.net/QF9tT/1/
position: absolutewill force a computeddisplayvalue ofblock, sodisplay: inline-blockshould not be doing anything whatsoever:http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo
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
displayvalue on an absolutely positioned element.