【问题标题】:Border-radius and background not connecting in Firefox only仅在 Firefox 中不连接边框半径和背景
【发布时间】:2011-11-22 05:17:53
【问题描述】:

这是我的小提琴:http://jsfiddle.net/edelman/NJHLU/

基本上,如果有边框的元素上有边框半径,则边框和背景实际上不会接触,从而创建一个看起来很愚蠢的小白圈。

我尝试过但没有奏效的方法:

  • background-clip 和所有可能的值
  • overflow: hidden
  • border-collapse 具有两个值

似乎没有任何效果。这只是我必须处理的 FF 渲染错误吗?

我见过this question,但我没有包装的奢侈,因为我在生成的内容上做这个 CSS(:before 伪元素)

编辑:我也尝试过使用box-shadow 代替边框,但这也有同样的问题。

【问题讨论】:

  • 伟大的实验。这很奇怪。 :)
  • Firefox 多年来一直在使用border-radius 绘制圆角问题。当圆角甚至没有抗锯齿时,在 Firefox 2 中情况更糟。
  • 它看起来确实像 Gecko 渲染错误,报告这样的事情而不是(或除了)只是解决它们真的很好!浏览器并不是一成不变的黑匣子,如果您在 Firefox 或 Chrome 中提交错误,则可以在几个月内修复用户使用的错误。无论如何,我提交了bugzilla.mozilla.org/show_bug.cgi?id=704399

标签: firefox css


【解决方案1】:

您可以使用您链接到的答案中描述的技术。添加 FF hack:

-moz-box-shadow:0px 0px 0px #2eb8ae;

【讨论】:

  • 它在你用 FF 8.0 jsfiddle.net/brian3f/szKKC987654321@创建的小提琴中对我有用
  • @Jason:你用的是什么版本的 Firefox?
  • @BrianFisher - 哇.. 使用无像素 box-shadowborder 解决了问题!谢谢!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-02-28
  • 2017-09-19
  • 2011-09-12
  • 2012-09-05
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多