IE8的图像问题


IE8 trouble with images

我不明白这麻烦的原因。我用的是图像滑块,除了IE8,一切都很好。

网址:link.

    <div id="slides">
        <div class="slides_container">
            <?php
                foreach($images as $image)
                   echo "<a href='#'><img style='margin: 0 auto; z-index: 9999;' src='{$image}' /></a>";
            ?>
        </div>
        <a href="#" class="prev"><img src="images/prev.png" width="45" height="52" alt="Arrow Prev"></a>
         <a href="#" class="next"><img src="images/next.png" width="45" height="52" alt="Arrow Next"></a>
    </div>

#slides {
    position:absolute;
    top:15px;
    left:4px;
    z-index:100;
}

.slides_container {
    margin-top: 30px;
    width:765px;
    height: 350px;
    overflow:hidden;
    position:relative;
    display:none;
}

.slides_container a {
    width:765px;
    height:350px;
    display:block;
}
.slides_container a img {
    display:block;
}

所以,在Chrome, Firefox等中,我在滑块中看到图像,但在IE8中我看不到任何图像。你能帮我找出毛病所在吗?

注。我无法在IE8下检查,因为我用的是Linux。

在"slides_container"div内生成的HTML代码如下:

<div class="slides_container">
   <a href='#'>
      <img style='margin: 0 auto; z-index: 9999;' src='images/gallery/home/pic29.jpg'></img>
   </a>
</div>

可以看到,图像标记没有正确呈现。它应该没有结束符

</img>

标记。

一旦这个问题被修复,它将在Internet Explorer中工作。

首先,我的建议,因为我通常运行这个,是创建脚本使用<li>浮动到左边。

$(".next").click(function()
    {
    var current = $(".active"),
    next = current.next(".inactive");
if(next.length > 0) { // there exists a next element
    current.add(next)
      .toggleClass("active inactive")
    offset_v = offset_v - 765;
      $("#slides_container ul").animate({left: offset_v}, 500);
        }
    });

在php中,将第一个元素设置为。active,其他元素设置为。inactive,就是这样。

冲洗并重复上一张图片