css - 溢出时的边界半径渲染错误 : hidden

标签 css

我在所有主流浏览器(已测试:IE 9、Chrome、Firefox)下渲染 border-radius 时都有一个错误。

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

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

有人有解决这个问题的方法吗?谢谢!

最佳答案

一个依赖于维度的解决方案...但也许这没关系,因为它是一个菜单栏而不是内容容器?无论如何,你可以在你的内部元素上设置 border-radius,给父元素一个高度,并将该高度值用于内部元素的 line-height

一旦应用了高度/行高,就不必使用overflow: hidden

由于您的菜单栏的边框半径为 3px,因此对第一个菜单项的适当 Angular 应用相同的舍入,如下所示:

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

并使栏的相应 Angular 更加圆润,以将它们隐藏在第一个菜单项下方:

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

http://dabblet.com/gist/3828755

关于css - 溢出时的边界半径渲染错误 : hidden,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12714130/

相关文章:

javascript - 取决于媒体查询的通用参数

javascript - Jquery slideToggle 不能与 display none css 一起工作

jquery - 为什么 margin-top 不能按百分比工作?

python - 如何解决过时的元素引用 - Selenium(Python)

html - 将样式应用于动态列表的第一个元素

html - 当元素位于其上方时,垂直导航栏会变长?

css - 为什么这个 Bootstrap 布局在 jsfiddle 中不起作用?

css3 选择器,第 n 个 child 递增 1

css - 使用比容器更大的图像以获得更好的 css 质量

html - 我怎样才能简单地从 AngularJS 的子菜单中切换/隐藏菜单