IE11在定位元素之间绘制一条小线

Question

我用HTML和CSS构建了一个思想泡泡，并且仅在IE11上发现了一个问题 - 每个其他浏览器（直到IE9）都运行良好。

这个想法很简单： 有一个包含文本的容器，并给它一个背景颜色和圆角。然后将另一个元素放入其中，使其看起来像一个箭头。放置箭头，使其位于容器旁边。

问题： 不知何故，即使箭头完全调整，箭头和容器之间也有一条非常小的线。而且这条线的高度不到1px。如果我将箭头向上移动一个凹口，那么它就位于容器内部，由于箭头和容器必须具有透明度，因此容器无法接受。

以下是显示问题的jsfiddle： http://jsfiddle.net/hurrtz/t2RhR/3/

HTML真的很简单。

<div id="bubble">
    <div class="arrow"></div>
</div>

CSS同样简单，归结为此（前面有一些伪代码）：

#bubble {
    (some dimension giving)
    background-color: rgba(0,0,0,0.5); //black, semitransparent
    position: relative;
}

#bubble .arrow {
    position: absolute;
    bottom: 0 - height of arrow:
    background-color: rgba(0,0,0,0.5); //black, semitransparent
}

顺便说一句：问题增加，减少或占用存在越多我让IE11放大或浏览器窗口的高度发生变化。

以下是IE11中的差距：

此图片的屏幕截图，缩放为500％，显示了这一点：

Answer 1

这是因为边界的计算方式。屏幕是一个有限网格，所以当你确定弧的中心位于坐标时，例如“10 x，10 y”这可能意味着不同的事情：

• 圆弧的中心位于第10个像素的中间？
• 弧的中心位于第10个像素的前端？
• 弧的中心位于第10个像素的末尾？

因此，当它绘制半径为10px的弧时，它可以从你预期的点进一步（或更接近）半像素（并将产生“半像素”大小，2px灰线，你想要1px黑色，一个圆圈这不是真正的圆形或其他一些令人伤心的惊喜。）

这种不同的行为在主流浏览器中很常见（例如：见Border-radius: 50% not producing perfect circles in Chrome）我认为它不应该被视为一个错误，这些只是执行决策，不幸的是我们不同于浏览器另一个。

最常见的解决方案是使用边框宽度（0.5px，1px，2px）和半径（偶数/奇数尺寸）或甚至用小数定位（底部：-19.5px？）。不能说这个组合会产生最好的结果，因为我无法在Windows 7 + IE11中重现它。

Answer 2

border-bottom：1px透明实体; margin-bottom：-1px; / *灰线修复* /

一切都很好，但这里的问题没有真正的答案。搜索后我发现了这个。它使用的是一个简单的白盒子上的IE和safari灰线问题。

Answer 3

根据@ miguel-svq回答（谢谢!!!），这非常有帮助，我已将其简化为以下内容：

#bubble{
       /* Set the border color to match your surrounding background. 
          It will take away the grey line in IE11 */
       border: solid 0.5px #f0f0f0; 
    }