jQuery Cycle 插件与 CSSPIE 结合使用会导致 IE8 及更低版本中的幻灯片为空

发布于 2024-12-08 03:43:15 字数 1132 浏览 0 评论 0原文

我有一个使用 jQuery Cycle 插件的图像幻灯片。图像有圆角,因此我使用 CSS3PIE 行为在 IE8 及更低版本中支持此功能。但使用 PIE 时,仅显示第一张图像,而其他图像只显示一张空幻灯片(在 IE8 及以下版本中)。当我禁用 PIE 时,一切看起来都很好。

有什么想法吗?

JavaScript:

$('#content-header-right-slideshow').cycle({
fx:         'fade',
speed:      1500,
timeout:    4000
});

HTML

<div id="content-header-right-slideshow">
<img src="/images/content-header-right-img01.jpg" width="283" height="249" title="" alt="" />
<img src="/images/content-header-right-img02.jpg" width="283" height="249" title="" alt="" />
<img src="/images/content-header-right-img03.jpg" width="283" height="249" title="" alt="" />
<img src="/images/content-header-right-img04.jpg" width="283" height="249" title="" alt="" />
</div>

CSS:

#content #content-header-right-slideshow {width:283px; height:249px; }
#content #content-header-right-slideshow img {-webkit-border-radius: 16px 0 16px 0; -moz-border-radius:  16px 0 16px 0; border-radius:  16px 0 16px 0; behavior: url(/css/PIE.htc); width:283px; height:249px; }

I have an image slideshow that uses the jQuery Cycle Plugin. The images have rounded corners so I use CSS3PIE behavior to support this in IE8 and below. But with PIE only the first image is displayed while the other images just give me a empty slide (in IE8 and below). When I disable PIE, everything looks fine.

Any idea's?

The Javascript:

$('#content-header-right-slideshow').cycle({
fx:         'fade',
speed:      1500,
timeout:    4000
});

The HTML

<div id="content-header-right-slideshow">
<img src="/images/content-header-right-img01.jpg" width="283" height="249" title="" alt="" />
<img src="/images/content-header-right-img02.jpg" width="283" height="249" title="" alt="" />
<img src="/images/content-header-right-img03.jpg" width="283" height="249" title="" alt="" />
<img src="/images/content-header-right-img04.jpg" width="283" height="249" title="" alt="" />
</div>

The CSS:

#content #content-header-right-slideshow {width:283px; height:249px; }
#content #content-header-right-slideshow img {-webkit-border-radius: 16px 0 16px 0; -moz-border-radius:  16px 0 16px 0; border-radius:  16px 0 16px 0; behavior: url(/css/PIE.htc); width:283px; height:249px; }

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文