jCarousellite不在IE 6/7/8中显示,在Safari / FF / Chrome中很好

时间:2011-02-03 20:50:19

标签: jquery css

我正在尝试实现像这样的幻灯片:http://biggayicecreamtruck.com但是对于我的生活,我无法弄清楚为什么他们的代码有效而我的代码没有。我的页面在这里:http://oaxacankitchenmobile.com。并不是IE没有造型,图像根本就没有显示出来。就像我说的,幻灯片在FF / Safari / Chrome中运行良好。这是我在主页上的代码

<div id="slideshow">
    <ul>
            <li><img title="Picture 1" alt="Picture 1" src="images/slideshow1.jpg" />
                <div class="text-bg"></div>
                <div class="text">
                    <h2>La Flor de Pi&ntilde;a</h2>
                </div>
            </li>
            <li><img title="Picture 2" alt="Picture 2" src="images/slideshow2.jpg" />
                <div class="text-bg"></div>
                <div class="text">
                    <h2>Agua Frescas</h2>
                </div>
            </li>
                            ...and so on...

我认为我列出图片的方式没有任何问题,因为它与其他网站完全相同。 jQuery加载正常,因为它适用于其他浏览器。我假设我正在再次正确初始化代码,因为它适用于其他浏览器。我正在使用的jCarousellite代码与来自其他站点的代码完全相同。

我认为我的问题必须与我的CSS有关,但是我遇到了问题。我无法弄清楚我需要改变什么来让幻灯片放映在IE中出现。谁能帮我?这是相关的CSS:

/*SLIDESHOW*/
#slideshow                          { width: 900px; height: 350px; border: 1px solid #362626; display: none; margin: 0 auto 28px; }
    #slideshow ul                   { list-style-type: none; margin: 0; }
    #slideshow img                  { width: 900px; height: 350px; }
    #slideshow li                   { width: 900px; height: 350px; position: relative; }
    #slideshow .text-bg             { position: absolute; bottom: 0; left: 0; width: 900px; height: 58px; background-color: #000; }
    #slideshow .text                { position: absolute; bottom: 18px; left: 18px; width: 900px; text-align: left; }
    #slideshow h2                   { display: inline; font-size: 18px; line-height: 24px; color: white; font-family: "Baskerville Old Face", serif; }
    #slideshow h2 a:hover           { text-decoration: none; }
    #slideshow p                    { display: inline; font-size: 13px; margin-left: 7px; }

另外一点让我感到沮丧:我的jQuery .load调用也没有在这个页面上运行。因此,似乎没有jQuery脚本在这个页面上工作。

2 个答案:

答案 0 :(得分:4)

问题,也许问题位于/js/okm.js的第75行:

$('#slideshow').jCarouselLite({
    visible: 1,
    speed: 800,             
    auto: 4000,
    vertical: false,
    pauseOnHover: true, //<---
});

删除多余的逗号 - it breaks IE

pauseOnHover: true

enter image description here

答案 1 :(得分:0)

如果您发现该图片有趣,我建议您转到http://www.enterprisedojo.com/2010/12/19/beware-the-trailing-comma-of-death/最初发布的地方:)