Question

我按照this教程创建了一个jQuery Horizontal Accordion。它工作正常，但在IE 7,8和9中缺少两张图片（它们是6张），你可以在现场观看：

HTML：

    <div class="jimgMenu">
        <ul>
            <li id="landscapes"><a href="http://alexchen.info/brianfunshine/events/jazz-shows/">Landscapes</a></li>
            <li id="people"><a href="http://alexchen.info/brianfunshine/events/kid-events/">People</a></li>
            <li id="nature"><a href="http://alexchen.info/brianfunshine/voice-demos/">Nature</a></li>
            <li id="abstract"><a href="http://alexchen.info/brianfunshine/music-2/commercial-music-production/">Abstract</a></li>
            <li id="urban"><a href="http://alexchen.info/brianfunshine/about/">Urban</a></li>
            <li id="people2"><a href="http://alexchen.info/brianfunshine/2011/05/gallery-test/">People2</a></li>
        </ul>
     </div>

JS：

    /**
     * Horizontal Slider
     */
    $j('.jimgMenu ul').kwicks({max: 310, duration: 300, easing: 'easeOutQuad'});
});

头：

<link href="css/jimgMenukwicks.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.pack.js"></script>

CSS：

.jimgMenu {
    position:relative;
    margin: 0 0 0 1px;
    padding: 0px;
    width: 958px;
    height :200px;
    overflow: hidden;
}
.jimgMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    height: 170px;
    position: relative;
    }
.jimgMenu ul li {
    width: 160px;
    float: left;
    display: block;
    overflow: hidden;
}
.jimgMenu ul li a {
    text-indent: -1000px;
    background: #fff repeat scroll 0%;
    border-right: 2px solid #fff;
    cursor: pointer;
    display: block;
    overflow: hidden;
    height: 200px;
}
.jimgMenu ul li#landscapes a {
    background: url(../images/landscapes.png) repeat scroll 0% !important;
}
.jimgMenu ul li#people a {
    background: url(../images/people.png) repeat scroll 0% !important;
}

.jimgMenu ul li#nature a {
    background: url(../images/nature.png) repeat scroll 0% !important;
}
.jimgMenu ul li#abstract a {
    background: url(../images/abstract.png) repeat scroll 0% !important;
}
.jimgMenu ul li#urban a {
    background: url(../images/urban.png) repeat scroll 0% !important;
}
.jimgMenu ul li#people2 a {
    background: url(../images/people2.png) repeat scroll 0% !important;
}

（Chrome和Firefox中的一切正常）。

（我在Linux上，所以我无法提供IE输出抱歉。）

修改

如果列表<li>标记 100px宽度，则会显示所有图片。我认为有一个溢出：隐藏的问题。但我尝试将宽度应用于几乎所有元素都没有运气。）

Answer 1

这就是这一行：

<!--[if IE]>
<style type="text/css">.jimgMenu {
position:relative;
width:630px; /* <<< Right here */
height:200px;
overflow:hidden;
margin-left:20px;
}
</style>
<![endif]-->

http://jfcoder.com/test/funshine.html

至少删除它，它工作正常。另外，我认为如果你完全删除它会很好。

在Internet Explorer 7,8和9中，jQuery水平手风琴有六张图片缺少两张？

1 个答案: