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

我用HTML和CSS构建了一个思想泡泡，发现只有IE11存在一个问题——其他浏览器（一直到IE9）都很好用

想法很简单： 拥有一个包含文本的容器，并为其提供背景色和圆角。然后把另一个元素放进去，使它看起来像一个箭头。放置箭头，使其正好位于容器旁边

问题是： 不知何故，即使箭头的位置调整得很好，箭头和容器之间还是有一条很小的线。这条线的高度小于1px。如果我将箭头向上移动一个槽口，那么它位于容器内，由于箭头和容器必须具有透明度，因此无法接受

下面是显示问题的JSFIDLE：

HTML真的很简单

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

顺便说一句：如果我让IE11放大，或者如果浏览器窗口的高度改变，问题就会增加、减少或出现

以下是IE11中的差距：

这张图片的屏幕截图（放大500%）显示：

---

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

弧的中心在第十个像素的中间？
• 弧的中心在第10个像素的边缘
• 弧的中心在第10个像素的末端

因此，当它以10px的半径绘制圆弧时，它可能会比您期望的点远（或近）半像素（并且会产生“半像素”大小，一条2px的灰线，您想要1px的黑色，一个不是真正圆的圆，或者其他一些令人悲伤的惊喜）

这种不同的行为在主流浏览器中很常见（例如，请参见：），我认为这不应该被视为一个bug，这些只是实现决策，不幸的是，我们在不同的浏览器中有所不同

---

最常见的解决方案是使用边框宽度（0.5px、1px、2px）和半径（偶数/奇数大小）或小数的偶数定位（底部：-19.5px？）。由于我无法在Windows7+IE11中复制它，所以不能说这种组合会产生最好的结果。

边框底部：1px透明固体； 页边距底部：-1px；/*灰线修正*/

---

一切都很好，但这个问题没有真正的答案。经过一番搜查，我找到了这个。它在我使用的一个简单的白框上解决了IE和safari灰线问题。

基于@miguel svq answer（谢谢！！！），这非常有用，我用以下内容简化了它：

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

---

像这样？不，是同一个问题。箭头和容器之间有一条很小的线。但是谢谢你的尝试。你在缩放网页吗？不过，缩放似乎是相关的。如果我放大，它有时会变得更糟，有时会消失。也许是某个地方的取整问题。是的，似乎是这样的。而且它受

气泡上的
边界半径
的影响，有一个气泡似乎将IE置于不同的渲染环境中？比较：后者没有这个问题，第一个有。奇怪的顺便说一句，我只是随便说说研究结果，但我完全不知道这里到底发生了什么。有趣：）我想这是能给出的最好答案。感谢您的澄清；）
#bubble{
       /* Set the border color to match your surrounding background. 
          It will take away the grey line in IE11 */
       border: solid 0.5px #f0f0f0; 
    }