Html 镀铬圆角-拐角处的多余线条

我对铬合金圆角周围出现的多余线条（如狩猎）的原因感到震惊。它不会发生在FF中

div.round-box{
边框底部：1px实心#B3；
高度：20px；
边缘底部：15px；
文本对齐：居中；
宽度：100%；
}
分圆盒台阶{
背景色：#0fa862；
边框：20px纯白；
边界半径：32px；
颜色：白色；
字体大小：1.7em；
填充：15px 25px；
位置：相对位置；
大纲：无；
文字装饰：无；
顶部：10px；
空白：nowrap；
-webkit边界半径：32px；
}

---

在浏览器渲染/抗锯齿时，它看起来像是一个误判。它在白色边框元素下绘制绿色背景，边缘有一点出血。可以通过再次包裹内部元素来解决此问题，使绿色仅在边框内绘制

div.round-box{
边框底部：1px实心#B3；
高度：20px；
边缘底部：15px；
文本对齐：居中；
宽度：100%；
}
分区内盒{
显示：内联块；
边框：20px纯白；
边界半径：32px；
-webkit边界半径：32px；
}
分圆盒台阶{
显示：块；
背景色：#0fa862；
边界半径：12px；
-webkit边界半径：12px；
颜色：白色；
字体大小：1.7em；
填充：15px 25px；
大纲：无；
文字装饰：无；
空白：nowrap；
}

---

这一条非常有用：

---

添加

背景剪辑：填充框

到。步骤
试试这个-谢谢。尝试了它，它修复了Chrome和Safari中的问题。不幸的是，它在IE中似乎没有起到作用。添加
背景剪辑：填充框至
。步骤
-，请检查此项-目前，这仅是对可能问题的评论。请改编小提琴，测试你的理论是否能解决问题。你不觉得有点简洁吗@leetylor？我们都只是想帮忙。这是一个答案，即使我还没有发布一个修复程序，而且真正的原因应该比补丁更重要，这样以后就可以避免这个问题。不，这是一个评论！答案将显示建议的解决方案，而不是讨论潜在的解决方案。感谢您的评论@leetylor，顺便说一句，包装它确实有效，我希望这有助于操作。谢谢。我想这一定是渲染/计算问题。您的代码（）没有正确对齐相邻的边框线，但向内部框添加两个新的CSS属性修复了该问题（）。我将采用这个解决方案，因为它可以在我所有的浏览器中工作。