具有边框半径的元素与其绝对定位的伪内容之间的奇怪空间答案

【问题标题】：Strange space between element with border radius and it's absolute positioned pseudo content具有边框半径的元素与其绝对定位的伪内容之间的奇怪空间
【发布时间】：2014-04-10 01:05:33
【问题描述】：

我在 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 上渲染：

这是JSFiddle link。

谁能帮我解开这个谜？

谢谢！

已测试：3 台不同的机器，装有 Windows 7 和 IE10。

【问题讨论】：

我已经在 IE 10 中测试了小提琴，它看起来与 Chrome 呈现的相同。对不起。
我在 3 台不同的机器上进行了测试，都遇到了同样的问题。
对我来说，在 FF、Chrome 和 IE 上看起来都一样。
@PAdrian 这是我这边的快照：i.imgur.com/gGdRdmB.png
在 Windows 8 和 IE10 上测试过：和 Chrome 一样，你试过清除缓存吗？

标签： html css internet-explorer-10

【解决方案1】：

我正在使用 IE11（也在 IE10 中测试过）来制作这个小提琴，是的，我在两者上都看到了一点点空白，并且在 FF 上渲染得很好。

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

【讨论】：

我也在使用 11，但我没有看到这条线。奇数。
好吧，我明白了：/ 并在 IE10 中测试（更新答案）并继续看到空白。
这个问题很烦人。在实际情况中，我有一个图像而不是绿色元素，我发现空间都在灰色元素周围。这意味着灰色元素的高度将低于图像。
用真实的内容制作一个小提琴，这样我们就可以真正帮助你解决这个 IE 愚蠢的问题。

【解决方案2】：

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

border-right: 1px solid transparent;

这里是solution。

谢谢大家！

【讨论】：