Css jQuery滑块上的圆角仅适用于Firefox

jQuery滑块上的圆角仅适用于Firefox

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

在Safari版本6.0.2（8536.26.17）中未正确渲染（请参见下图）

在Chrome版本23.0.1271.101中未正确渲染（请参见下图）

以下是JSFIDLE构建：（注意，我只提供了滑块图像的完整路径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
}

---

我的猜测是，这是旧的“前景图像未剪辑”错误

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

我的印象是，这是一些主要的浏览器已经处理过的事情，但这不是我已经研究了一段时间的事情，所以我可能在这方面弄错了。看起来确实是你看到的。我记得在Firefox3.x时代，这是一个相当大的问题，但如果我没记错的话，FF团队在v4和v8之间解决了这个问题

为了证明这一点，在元素中添加一个实际的边框（例如

border:solid black 2px；

），看看会发生什么。如果边界沿着半径消失在图像的拐角处，那么这就是您看到的错误

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

使用背景图像代替；这不会被剪掉

添加一个额外的标记层——例如一个

，其中包含现有的

，并将边界半径放在

上，而不是放在

上

忽略它，并等待浏览器供应商解决该问题

---

我在Chrome中工作…在Chrome中有很多多余的代码。你能不能把它归结为证明问题所需要的东西？顺便说一句：在JSFIDLE中，您不包括

部分或

和

标记。。。仅包括

的内容。看到左边的面板了吗？使用它来包含外部文件。酷，谢谢你的帮助。嘿，Spudley-我想就是这样。我对它进行了测试，事实上它就是您引用的bug。我真的不想使用内联样式，但我想我必须这样做！感谢您的相关回复。