0

我已经在我的页面（BXSlider）中添加了一个 JQuery 滑块，除了 IE（7 和 8）中的这个页面之外，它几乎在每个页面（在每个浏览器中）都可以正常工作。

滑块中的图像被加载但它显示一个大的空白区域而不是滑动表（是的，此时它需要是一个表）！

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

我希望有人能给我指出正确的方向……</p>

非常感谢， Jochen

4

1 回答 1

2

正如我在上面的评论中提到的。您实现滑块的方式会产生不正确的 html。bxslider 在包含您的图像的 td 之外包装了两个 div，因此您会得到这样的 HTML 结构：table > tr > div > div > td，这就是 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 并且滑块显示跨浏览器之后，代码仍然有效。你会在这里找到一个演示。帮自己一个忙，验证你的代码，里面有更多的错误（双重关闭标签和其他），这可能会导致最奇怪的布局行为。

于 2013-02-01T16:04:28.983 回答