在Firefox和Opera浏览器中，div边框半径存在问题

Question

您看到了两张图片。首先是Chrome。右侧有Beğen和Yorumlar按钮，边框看起来非常好。

但是第二张图片显示，Firefox和Opera的边框半径存在问题。我尝试使用border-witdh：thin，border:1px solid等，但外观看起来一样。

如何解决它？你有什么想法吗？

对我的英语很抱歉。谢谢

Chrome上的图片

Firefox和Opera上的图片

- Ayro

---

有没有可能在jsfiddle.com上提供一个可工作的演示？如果我们能够真正看到它而不仅仅是在图形中看到，那么这将有助于我们弄清楚发生了什么。 - Spudley

抱歉，我无法解释我的问题。如您所见，蓝色按钮的边框非常清晰，我没有使用边框样式：Border: 0。我的意思是Firefox和Opera会模糊边框，它们显示出似乎有边框的样子，但实际上并没有边框。我不想要阴影效果，也不需要边框。我有一个背景图片，我想显示出清晰的效果。请看图片，Firefox显示的边框与Chrome不同，实际上div元素并没有边框！图片 - Ayro

我解决了 :) 问题是我同时使用了背景颜色和背景图片。现在我只使用背景图片，没有问题。谢谢大家 :) - Ayro

Answer 1

这种效果通常被称为“背景渗透”或“泄漏”。可以通过一些简单的CSS来修复它:

-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;

我第一次从Mike Harding的博客上了解到这个问题：
http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed

这里是W3C规范：
http://www.w3.org/TR/css3-background/#the-background-clip

- Joshua Stachowski

Answer 2

...这个按钮看起来几乎可以完全不使用边框。按钮和背景之间有足够的对比度。你尝试过使用1像素（模糊半径）的外发光吗？

-moz-box-shadow: [position-x] [position-y] [blur-radius] [color];
-webkit-box-shadow: [position-x] [position-y] [blur-radius] [color];
box-shadow: [position-x] [position-y] [blur-radius] [color];

- vector

Answer 3

为了解决Chrome浏览器边框的问题，可以将代码中的border:1px double ...设置为双线边框。我知道Chrome浏览器在处理带有圆角的边框时会出现问题，将其设置为双线边框而不是实线边框可以稍微改善一下。这个问题有点烦人。

- brenjt