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

我的猜测是它是旧的“前景图像未裁剪”错误。

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

我的印象是主流浏览器已经处理了这个问题，但我已经有一段时间没有研究过了，所以我可能会误会。它当然看起来就像你所看到的。我记得在 Firefox 3.x 时代这是一个相当大的问题，但如果我没记错的话，FF 团队在 v4 和 v8 之间进行了整理。

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

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

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