带有6张图片的jQuery水平手风琴在Internet Explorer 7、8和9中丢失了2张？
|
我按照本教程进行操作，以创建jQuery Horizontal Accordion。
可以，但是在IE 7、8和9中，如您在实时站点中看到的，缺少两张图片（它们是6张）：
http://brianfunshine.com/
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>
/**
* 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>
.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;
}
<li>
没有找到相关结果
已邀请:
1 个回复
昧伎
<!--[if IE]> <style type=\"text/css\">.jimgMenu { position:relative; width:630px; /* <<< Right here */ height:200px; overflow:hidden; margin-left:20px; } </style> <![endif]-->