我在所有主流浏览器（已测试：IE 9，Chrome，Firefox）下渲染border-radius有一个错误 .
发生的事情是我有一个带有border-radius的菜单栏，并且在那里有一些链接宽度为背景颜色 . 为了使按钮保持在菜单的形状内，我设置了一个隐藏在菜单容器上的溢出 . 直到一切顺利，然后，角落边缘出现一条小白线 .
我在这里做了一个简化的测试用例：http://dabblet.com/gist/3828561
任何人都有解决方案来克服这个问题？谢谢！
我在所有主流浏览器（已测试：IE 9，Chrome，Firefox）下渲染border-radius有一个错误 .
发生的事情是我有一个带有border-radius的菜单栏，并且在那里有一些链接宽度为背景颜色 . 为了使按钮保持在菜单的形状内，我设置了一个隐藏在菜单容器上的溢出 . 直到一切顺利，然后，角落边缘出现一条小白线 .
我在这里做了一个简化的测试用例：http://dabblet.com/gist/3828561
任何人都有解决方案来克服这个问题？谢谢！
1 回答
依赖于维度的解决方案......但也许's OK since it'是一个菜单栏而不是内容持有者？无论如何，您可以在内部元素上设置
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