jQuery Slider上的圆角仅适用于Firefox

Question

我的jQuery滑块上的圆角只能在Firefox中使用。

在Firefox 17.0.1中正确渲染（见下图）

在Safari版本6.0.2（8536.26.17）中无法正确呈现（见下图）

在Chrome版本23.0.1271.101中无法正确呈现（参见下图）

这是jsfiddle构建：http://jsfiddle.net/plasticmonument/TCVH5/1/（注意，我只给滑块图像提供了完整的路径url，其他一切都将丢失）

我的HTML：

enter code here

我的CSS：

.hero-wrapper {
position: relative;
z-index: 2;
float: left;
width: 100%;
height: 429px;
border-radius: 10px;
border-top-left-radius: 0;
-webkit-border-radius: 10px;
-webkit-border-top-left-radius: 0;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius: 10px;
-moz-border-top-left-radius: 0;
-o-border-radius: 10px;
-o-border-top-left-radius: 0;
-ms-border-radius: 10px;
-ms-border-top-left-radius: 0;
overflow: hidden
}

#feature-slider ul.slider {
position: absolute;
top: 0;
left: 0;
width: 900000px
}

Answer 1

我的猜测是它是旧的“前景图像没有剪辑”的错误。

在某些浏览器中，可能会应用边框半径，但具有border-radius的元素的前景图像不受半径限制。

我的印象是这是主要浏览器处理过的东西，但这不是我已经研究了一段时间的东西，所以我可能会弄错。它看起来肯定是你所看到的。我记得在Firefox 3.x时代这是一个相当大的问题，但是如果我没记错的话，FF团队将它排在v4和v8之间。

要证明这一点，请在元素中添加一个实际边框（例如border:solid black 2px;），看看会发生什么。如果边框在角落处的图像下消失，因为它跟随半径，那么这就是你看到的错误。

如果这是问题，那么解决方案是：

1. 改用背景图片;这不会被剪裁。
2. 添加一个额外的标记层 - 例如<div>，其中包含现有的<img>，并将边框半径放在<div>而不是<img>上。
3. 忽略它，等待浏览器供应商解决问题。