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

  • 本文关键字:错误 隐藏 边框 溢出 css
  • 更新时间 :
  • 英文 :


我在所有主要浏览器(测试:IE 9,Chrome,Firefox)下渲染边框半径时有一个错误。

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

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

有人有克服这个问题的解决方案吗?谢谢!

一个与维度相关的解决方案...但也许没关系,因为它是菜单栏而不是内容持有者? 无论如何,您可以在内部元素上设置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

最新更新