好的,所以我经历过像“background-clip：padding-Box”这样的答案.虽然它使最终产品看起来好一点,但它仍然不能完全解决边界外背景颜色渗出的问题.有没有人真正解决这个问题？
这是该问题的屏幕截图：
用于按钮的CSS
#footer #pager li a {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
display: block;
float: left;
color: #444 !important;
text-decoration: none !important;
background-clip: padding-Box !important;
padding: 8px 12px;
background-color: #ccc;
border: 1px solid #000;
}
解决方法
我知道,这不是你在等待的,但我必须这样说：使用图像.这不仅是因为可以消除所有浏览器的出血.与Chrome无情地扼杀你的按钮外观相比,你在Firefox上的流血问题无关紧要……检查并开始哭泣:(.
如果你想知道什么是错的：当你在同一个元素上使用border-radius和Box-shadow：inset时,Chrome是完全无助的.这是一个已知的错误,你不能消除它,直到他们在浏览器中修复它(并判断他们如何“快速”响应一些错误报告 – 有些已经在两年前报告过,仍然没有解决,即使是用户提供了现成的解决方案 – 我认为我们不应期望Chrome在不久的将来能够正常运行.
[编辑]
另外,请注意：
> Firefox产生出血效果
> Opera不会渲染CSS3渐变
> IE不会渲染框阴影
> Chrome以最糟糕的方式失败
所以…没有一个浏览器可以正确呈现你的按钮.在这种情况下继续使用CSS3是否有意义？
