如何解决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的错误,为什么?
jsfiddle上的一个测试用例:
http://jsfiddle.net/QF9tT/
解决方法
您只需从
#inner
中删除display: inline-block
。
请参阅:http://jsfiddle.net/QF9tT/1/
position: absolute
将强制计算出的display
值block
,因此display: inline-block
不应做任何事情:
http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo
否则,如果\'position \'具有值
\'absolute \'或\'fixed \',此框为
绝对定位,..和显示
根据下表设置。
[inline-block =块]
但是,在这种情况下,这种现象似乎在Chrome中存在问题。
您应该考虑在此处提交报告:http://code.google.com/p/chromium/issues/list
再者,这个问题很容易解决:不要在绝对定位的元素上指定无意义的display
值。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。