Question

在IE8中，切换类型有效，但它覆盖了下面的内容。它在所有其他浏览器中都能正常工作。我一直在尝试过去2个小时来解决这个问题，但没有运气......

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属性的问题。

这是值得尝试的内容，有更多内容可以尝试使用Google“Internet Explorer 8内联块”：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/

.toggle在IE8中无法正常工作

1 个答案: