边界半径=背景出血

Question

好的,所以我经历过像"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;
}

Answer 1

我知道,这不是你在等待的,但我必须这样说:使用图像.这不仅是因为可以消除所有浏览器的出血.与Chrome无情地扼杀你的按钮外观相比,你在Firefox上的流血问题无关紧要......检查并开始哭泣:(.

如果你想知道什么是错的:当你在同一个元素上使用border-radius和box-shadow:inset时,Chrome是完全无助的.这是一个已知的错误,你不能消除它,直到他们在浏览器中修复它(并判断他们如何"快速"响应一些错误报告 - 有些已经在两年前报告过,仍然没有解决,即使是用户提供了现成的解决方案 - 我认为我们不应期望Chrome在不久的将来能够正常运行.

[编辑]

另外,请注意:

• Firefox产生出血效果
• Opera不会渲染CSS3渐变
• IE不会渲染框阴影
• Chrome以最糟糕的方式失败

所以...没有一个浏览器可以正确呈现你的按钮.在这种情况下继续使用CSS3是否有意义？