我在IE10上遇到了一个关于边界半径和绝对定位伪内容的元素的问题。
所以,HTML:
<div id="parent">
<div id="border">
</div>
</div>
和CSS:
#parent {
width: 200px;
height: 200px;
}
#border {
width: 50px;
height: 50px;
border-radius: 5px;
background: gray;
position: relative;
}
#border:after{
content: "";
display: block;
position: absolute;
width: 30px;
height: 50px;
background: green;
left: 100%;
top: 0;
}
在Chrome上呈现:
在IE10上渲染:
任何人都可以帮助我解开这个谜团吗?
谢谢!
TESTED ON:使用Windows 7和IE10的3台不同的机器。
答案 0 :(得分:1)
我正在使用IE11(也在IE10中测试过)这个小提琴,是的,我在两者上看到一个小小的空白区域,并在FF上呈现良好状态。
将您的left:100%
更改为left:99.9%
答案 1 :(得分:0)