IE-Bug与JQuery-Slider

Question

我已经在我的页面上添加了一个JQuery滑块(BXSlider)，它在几乎每个页面(在每个浏览器中)上都能正常工作，除了IE (7 & 8)中的这个页面。

滑块中的图像被加载，但它显示了一个很大的空白空间，而不是滑动的表(是的，在这一点上它需要是一个表)！

对于张贴的链接很抱歉，但我不能弄清楚这一点，我不知道我应该在这里添加哪些代码…是CSS问题还是与JQuery/Javascript相关？

我希望有人能告诉我正确的方向…

非常感谢，Jochen

Answer 1

正如我在上面的评论中提到的。实现滑块的方式会产生不正确的html。bxslider在包含你的图片的td之外包装了两个，所以你会得到一个像这样的超文本标记语言结构：表> tr > div > div >this，这就是IE有问题的原因--浏览器是对的。如果不能去掉这个表(我更喜欢这样)，请执行以下操作：

修改滑块表的HTML，如下所示：

<table border="0">
    <tbody>
        <tr>
            <td>
                <div class="bx-box">[.. YOUR LINKS AND IMAGES .. ]</div>
            </div>
        </tr>
    </tbody>
</table>

在JS中这样做：

$(function(){
    // change your your selector to the nested div container
    // and tada it works in ie too.
    $('td .bx-box').bxSlider({
        infiniteLoop: true,
        hideControlOnEnd: true
    });
});

现在，在bxSlider在代码周围添加了包装器div之后，代码仍然有效，并且滑块跨浏览器显示。你会找到一个demo here。帮你自己一个忙，验证你的代码，里面有更多的错误(双闭合a标签和其他)，这可能会导致最奇怪的布局行为。