溢出时的边框半径渲染错误：隐藏

Question

我在所有主流浏览器（已测试：IE 9、Chrome、Firefox）下渲染边框半径都有一个错误。

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

我在这里做了一个简化的测试用例：http://dabblet.com/gist/3828561

有人有解决这个问题的方法吗？谢谢！

Answer 1

依赖于尺寸的解决方案...但也许没关系，因为它是一个菜单栏而不是一个内容持有者？不管怎样，你可以在你的内部元素上设置border-radius，给父元素一个高度，也可以为内部元素的line-height 使用这个高度值。

应用高度/行高后，您不必使用overflow: hidden。

由于您的菜单栏的边框半径为3px，因此对第一个菜单项的相应角应用相同的舍入，如下所示：

.outer .inner:first-of-type { border-radius: 3px 0 0 3px; }

并使栏的相应角更加圆润，将它们隐藏在第一个菜单项下方：

.outer { border-radius: 10px 3px 3px 10px; }

http://dabblet.com/gist/3828755