jquery - .toggle 在 IE8 中无法正常工作

Question

在 IE8 中，切换功能可以正常工作，但它会覆盖下面的内容。它在所有其他浏览器中都可以正常工作。在过去的 2 个小时里，我一直在尝试解决这个问题，但没有成功......

Here's what I mean

jquery:

$(document).ready(function() {  

    $('.toggle').hide();

    $('.expand-all').click(function(){
        // switch visibility
        $(this).data('is_visible', !$(this).data('is_visible'));

        // change the link depending on whether the element is shown or hidden
        $(this).html( (!$(this).data('is_visible')) ? 'Expand all' : 'Hide');

        $(this).next().toggle();

    return false;
    }); 


});

html:

    <div id="categories">
        <div class="cat">
            <h3>Rice</h3>
            <ul>
                <li><a href="">Rice brand 1</a></li>
                <li><a href="">Rice brand 2</a></li>
                <li class="expand-all">Expand all</li>
                <div class="toggle">
                    <li><a href="">Rice brand 1</a></li>
                    <li><a href="">Rice brand 1</a></li>
                </div>
            </ul>
        </div>
        <div class="cat">etc</div>
        <div class="cat">etc</div>
        <div class="cat">etc</div>
    </div>

Answer 1

看来您在设置 display : inline-block 属性时遇到了问题。

这里有一些东西可以尝试，更多的东西可以尝试谷歌“internet explorer 8 inline-block”:http://www.compsoft.co.uk/Blog/2009/11/inline-block-not-quite-inline-blocking.html

此外，IE7 不接受 display : inline-block 属性，因此您需要将此添加到您的代码中以使其在 IE7 中也能正常工作:

.some-ele {
    display  : inline-block;
    *display : inline;
    zoom     : 1;
}

*display 属性无效，但仍会被 IE7 读取，要使其生效，元素必须具有不能手动设置的 hasLayout 属性但您可以通过设置 zoom : 1 强制设置它。

对于 IE6，您需要为 display : inline-block 指定一个高度才能工作，但如果您只想为 IE6 指定一个高度，您可以使用 _height : XXpx只能由 IE6 读取(IE 将消化的更多无效代码)。这是一些关于此的信息:http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/