jQuery Cycle 插件与 CSSPIE 结合使用会导致 IE8 及更低版本中的幻灯片为空
我有一个使用 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论