javascript - 带有 JQuery-Slider 的 IE-Bug

Question

我在我的页面 (BXSlider) 中添加了一个 JQuery Slider，它在几乎每个页面(在每个浏览器中)都可以正常工作，除了 IE(7 和 8)中的这个页面。

slider 内的图像已加载，但它显示了一个大的空白区域而不是滑动的表格(是的，此时它需要是一个表格)!

对于已发布的链接，我很抱歉，但我无法弄清楚这个，我不知道我应该在此处添加哪些代码...这是 CSS 问题还是与 JQuery/Javascript 相关？

我希望有人能给我指出正确的方向......

非常感谢， 乔臣

Answer 1

正如我在上面的评论中提到的。您实现 slider 的方式会产生不正确的 html。 bxslider 将两个 div 包装在包含图像的 td 之外，因此您会得到这样的 HTML 结构:table > tr > div > div > td，这就是 IE 出现问题的原因 -浏览器是正确的。如果你不能摆脱 table (我更喜欢)，请执行以下操作:

像这样修改 slider 表的 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 并且 slider 跨浏览器显示后，代码仍然有效。你会发现一个 demo here .帮自己一个忙，验证你的代码，里面有更多错误(双关闭标签和其他)，这可能会导致最奇怪的布局行为。