これが問題の私のHTMLコードです。
<script type="text/css">
.slider-holder {
background-color:transparent;
}
.slider-bg {
min-height: 295px;
position: relative;
z-index: 1;
border-bottom:0px;
}
.slider {
height: 295px;
padding: 1px 17px 0;
margin: 0 auto;
position: relative;
background: transparent;
}
.slider .items,
.slider .items2 {
position: relative;
height: 293px;
float: left;
}
.slider .items div.item,
.slider .items2 div.item{
height: 293px;
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.slider .slider-text {
width: 720px;
position: relative;
z-index: 2;
padding: 70px 0 0;
}
.slider .slider-text, .slider .slider-text p {
background-color: inherit;
color: #fff;
font-size: 32px;
line-height: 33px;
}
.slider .slider-text.smaller p
{
font-size:24px;
}
.slider .slider-text p { padding: 0 0 10px; }
.slider .slider-text a.slider-btn {
background: #58940a url('img/btn/slider-btn.png') no-repeat 8px 7px;
display: block;
float: left;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0px 0px 40px #666;
-moz-box-shadow: 0px 0px 40px #666;
box-shadow: 0px 0px 40px #666;
padding: 6px 10px 6px 32px;
color: #fff;
font-size: 15px;
line-height: 20px;
height: 20px;
}
.slider .slider-img {
position: absolute;
bottom: 0px;
padding: 0 5px 0 0;
z-index: 1;
left:-312px;
zoom: 1;
}
.slider .slidetabs {
position: absolute;
left:375px;
bottom: 27px;
z-index: 3;
}
.slider .slidetabs a {
background: url('img/elem/thumbnail-disc.png') no-repeat left top;
display: block;
width: 11px;
height: 11px;
float: left;
margin: 0 6px 0 0;
}
.slider .slidetabs a:hover, .slider .slidetabs a.current { background-position: left bottom; }
</script>
<div class="slider-holder">
<div class="slider-bg">
<!--begin:slider-->
<div class="slider">
<div class="items">
<!--begin:item-->
<div class="item" style="display: none; ">
<div class="slider-text"></div>
<div class="slider-img">
<img src="image.jpg" alt="" width="1600" height="294" align="center">
</div>
</div>
<!--end:item-->
<!--begin:item-->
<div class="item" style="display: none; ">
<div class="slider-text smaller"></div>
<div class="slider-img">
<img src="image2.jpg" alt="" width="1600" height="294" align="center">
</div>
</div>
<!--end:item-->
<!--begin:item-->
<div class="item" style="display: block; ">
<div class="slider-text"></div>
<div class="slider-img">
<a href="http://www.link.com" target="_blank">
<img src="image.jpeg" alt="" width="1600" height="294" align="center">
</a>
</div>
</div>
<!--end:item-->
</div>
<div class="slidetabs">
<a href="#" class=""></a>
<a href="#" class=""></a>
<a href="#" class="current"></a>
</div>
</div>
<!--end:slider-->
</div>
</div>
この特定の設定の問題は、imgがdivよりも大きいことです(これは意図的なものです。この設定は、IE8を除くほとんどのブラウザで機能します。.slider-holderボックスで切断されます(または少なくとも表示されます)。