Css 溢出时边界半径渲染错误：隐藏

我在所有主要浏览器（测试：IE 9、Chrome、Firefox）下的边界半径渲染中都有一个bug

发生的事情是，我有一个菜单栏与边界半径，在那里有一些链接宽度的背景色。为了使按钮保持在菜单的形状内，我在菜单容器上设置了一个隐藏的溢出。直到一切顺利，但是，在角落边缘出现了一条小白线

我在这里做了一个简化的测试用例：

---

有人有办法克服这个问题吗？谢谢

一个依赖维度的解决方案……但也许这没关系，因为它是一个菜单栏，而不是一个内容持有者？无论如何，您可以在内部元素上设置

边界半径

，为父元素指定一个高度，并将该高度值用于内部元素的

行高度

应用高度/线条高度后，不必使用

溢出：隐藏

由于菜单栏的边框半径为
3px
，请将相同的圆角应用于第一个菜单项的相应角，如下所示：

.outer.inner:类型{边界半径：3px 0 3px；}的第一个

并使相应的栏角更圆，以将其隐藏在第一个菜单项下：

.outer{边界半径：10px 3px 3px 10px；}

我想说，这不仅仅是圆角渲染的复杂性，即抗锯齿。我可以想象，呈现圆角的代码相当复杂。搞乱了你的代码，加了一个边框，我很清楚白色背景比css半径稍大一点——请与每个浏览器供应商联系……解决办法是添加一个正确的蓝色背景图像，以遮掩css半径的“底图”，在角落处用白色线遮住css半径的“底图”背景：rgba（255255,0.9）类的属性。嘿，谢谢，我想这是正确的方法。尽管如此，您添加了很多代码，最终的解决方案没有多少灵活性。我在这里做了一个更简单的版本：