css - IE11 在定位元素之间画一条小线

我用 HTML 和 CSS 构建了一个思想泡泡，发现一个仅在 IE11 上存在的问题——其他所有浏览器(直到 IE9)都运行良好。

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

问题:
不知何故，即使箭头完全调整好，箭头和容器之间也有一条非常小的线。这条线的高度小于 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% 显示:

最佳答案

这是因为边界的计算方式。屏幕是一个有限网格，因此当您决定圆弧的中心位于坐标处时，例如“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 中重现它。

关于css - IE11 在定位元素之间画一条小线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24380720/