-1

我的 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
}
4

1 回答 1

0

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

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

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

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

如果这是问题所在,那么解决方案是:

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