具有边界半径的元素之间的奇怪空间和它的绝对定位伪内容

时间:2014-04-09 15:45:48

标签: html css internet-explorer-10

我在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上呈现:

Chrome

在IE10上渲染:

IE10

这是JSFiddle link

任何人都可以帮助我解开这个谜团吗?

谢谢!

TESTED ON:使用Windows 7和IE10的3台不同的机器。

2 个答案:

答案 0 :(得分:1)

我正在使用IE11(也在IE10中测试过)这个小提琴,是的,我在两者上看到一个小小的空白区域,并在FF上呈现良好状态。

将您的left:100%更改为left:99.9%

IE10 with left:100% and white space

IE10 with left:99.9% and NO white space

答案 1 :(得分:0)

一位工作同事解决了这个问题。 他补充说:

border-right: 1px solid transparent;

这是solution

谢谢大家!