.toggle не работает должным образом в IE8

Question

В IE8 переключатель вроде работает, но он перекрывает содержимое ниже. Он отлично работает во всех других браузерах. Последние 2 часа я пытался это исправить, но не повезло ...

Вот что я имею в виду

1010 * 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 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/