jCarousellite不显示在IE 6/7/8中，在Safari/FF/Chrome中很好 [英] jCarousellite not displaying in IE 6/7/8, fine in Safari/FF/Chrome

问题描述

我正在尝试实现这样的幻灯片显示: http://biggayicecreamtruck.com ，但是我无法弄清楚为什么他们的代码行得通，而我的代码却行不通.我的页面在这里: http://oaxacankitchenmobile.com .并不是说IE没有设计样式，而是根本没有显示图像.就像我说的那样，幻灯片显示在FF/Safari/Chrome中可以正常运行.这是我在主页上的代码

I'm trying to implement a slideshow like this one: http://biggayicecreamtruck.com but for the life of me I can't figure out why their code works and mine doesn't. My page is here: http://oaxacankitchenmobile.com. It's not that IE isn't styling it, the images just aren't showing up at all. Like I said, the slideshow works fine in FF/Safari/Chrome. Here's my code on the main page

<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代码与另一个站点的代码完全相同.

I don't think there's anything wrong with the way I'm listing the images, since it's exactly the same as the other site. jQuery is loading fine, since it works on those other browsers. I'm assuming that I'm initializing the code correctly again, since it works on other browsers. The jCarousellite code I'm using is exactly the same as the one from the other site.

我在想我的问题应该出在我的CSS上，但是那是我被困的地方.我想不通我需要做些什么才能使幻灯片完全显示在IE中.谁能帮我?这是相关的CSS:

I'm thinking that my problem has to be with my CSS, but there's where I'm stuck. I can't figure out what I need to change to get the slide show to appear at all in IE. Can anyone help me? Here's the relevant 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脚本.

One other bit adding to my frustration: my jQuery .load calls aren't working on this page, either. So, it appears that no jQuery scripts are working on this page.

推荐答案

问题，也许问题在/js/okm.js的第75行上:

A problem, perhaps the problem is on Line 75 in /js/okm.js:

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

删除多余的逗号-

这篇关于jCarousellite不显示在IE 6/7/8中，在Safari/FF/Chrome中很好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！