Как я могу исправить элементы пользовательского интерфейса, которые не отображаются в IE 7?

Question

Я работаю над дизайном для веб-сайта, и у меня возникают проблемы с тем, что, по-видимому, связано с IE7 при создании панели навигации.

Это проблема, которую я получаю:

Вы можете заметить, что некоторые пункты меню не отображаются.

Я создал для нее скрипку . (не уверен, что это помогает в IE7, хотя: - /, поэтому я также сделал скелет, где возникает та же проблема: здесь это )

Меню имеет следующую структуру:

<nav>
<h3>Navigation header 1</h3>
    <h4>Navigation header level2</h4>
        <ul>
            <li><a>my link 1</a></li>
            <li><a>my link 2</a></li>
        </ul>
    <h4>Navigation header level2</h4>
        <ul>
            <li><a>my link 1</a></li>
            <li><a>my link 2</a></li>
        </ul>

<h3>Navigation header 2</h3>
    <h4>Navigation header level2</h4>
        <ul>
            ...
        </ul>
</nav>

Я использую Jquery UI CSS Framework для создания скинов, поэтому сгенерированный HTML-код для этой страницы выглядит следующим образом (с использованием классов из пользовательского интерфейса jQuery и значков):

<nav class="company-ui-nav ui-widget ui-helper-reset ui-corner-all ui-widget-content">
    <h3 class="ui-corner-top ui-widget-header">Examples</h3>
    <h4 class="first ui-state-default ui-button-text ui-state-highlight"><span class="ui-icon ui-icon-triangle-1-s"></span>Default styles</h4>
    <ul style="display: block;">
        <li class="ui-state-default ui-priority-secondary no-border-top ui-state-highlight">
            <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="/Examples/Contents" class="on">Page contents</a>
        </li>
        <li class="ui-state-default ui-priority-secondary no-border-top">
            <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="/Examples/Forms">Forms</a>
        </li>
        <li class="ui-state-default ui-priority-secondary no-border-top">
            <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="/Examples/Buttons">Buttons</a>
        </li>
        <li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom">
            <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="/Examples/Validation">Validation</a>
        </li>
    </ul>
    <h4 class="ui-state-default ui-button-text"><span class="ui-icon-triangle-1-e ui-icon"></span>JS related</h4>
    <ul style="display: none;">
        <li class="ui-state-default ui-priority-secondary no-border-top">
            <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="/Examples/Widgets">Widgets</a>
        </li>
        <li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom">
            <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">????</a>
        </li>
    </ul>
    <h3 class="ui-widget-header no-border-top">Navigation h3</h3>
            <h4 class="first ui-state-default ui-button-text"><span class="ui-icon-triangle-1-e ui-icon"></span>Tests navi 0</h4>
            <ul style="display: none;">
                <li class="ui-state-default ui-priority-secondary no-border-top">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 0.0</a>
                </li>
                <li class="ui-state-default ui-priority-secondary no-border-top">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 0.1</a>
                </li>
                <li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 0.2</a>
                </li>
            </ul>
            <h4 class="ui-state-default ui-button-text no-border-top"><span class="ui-icon-triangle-1-e ui-icon"></span>Tests navi 1</h4>
            <ul style="display: none;">
                <li class="ui-state-default ui-priority-secondary no-border-top">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 1.0</a>
                </li>
                <li class="ui-state-default ui-priority-secondary no-border-top">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 1.1</a>
                </li>
                <li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 1.2</a>
                </li>
            </ul>
            <h4 class="ui-state-default ui-button-text no-border-top"><span class="ui-icon-triangle-1-e ui-icon"></span>Tests navi 2</h4>
            <ul style="display: none;">
                <li class="ui-state-default ui-priority-secondary no-border-top">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 2.0</a>
                </li>
                <li class="ui-state-default ui-priority-secondary no-border-top">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 2.1</a>
                </li>
                <li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 2.2</a>
                </li>
            </ul>
        <h3 class="ui-widget-header no-border-top">Another title</h3>
            <h4 class="first ui-state-default ui-button-text"><span class="ui-icon-triangle-1-e ui-icon"></span>Tests 0</h4>
            <ul style="display: none;">
                <li class="ui-state-default ui-priority-secondary no-border-top">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 0.0</a>
                </li>
                <li class="ui-state-default ui-priority-secondary no-border-top">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 0.1</a>
                </li>
                <li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 0.2</a>
                </li>
            </ul>                
            <h4 class="ui-state-default ui-button-text no-border-top"><span class="ui-icon-triangle-1-e ui-icon"></span>Tests 1</h4>
            <ul style="display: none;">
                <li class="ui-state-default ui-priority-secondary no-border-top">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 1.0</a>
                </li>
                <li class="ui-state-default ui-priority-secondary no-border-top">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 1.1</a>
                </li>
                <li class="ui-state-default ui-priority-secondary no-border-top no-border-bottom">
                    <span class="ui-icon ui-icon-arrowreturn-1-e"></span><a href="#">Sous-niveau 1.2</a>
                </li>
            </ul>                          
    </nav>

Любая подсказка о том, что может вызвать это? Я подозреваю, что проблема связана с CSS ...

Answer 1

Кажется, это проблема hasLayout.Вы использовали display:inline-block; для позиционирования стрелок слева от текста навигации для тех элементов, которые не отображаются.IE7 не поддерживает (или поддерживает плохо, я не могу вспомнить, какой именно) inline-block, поэтому вам нужно либо изменить это на что-то другое, например, абсолютное позиционирование, которое у вас есть для тех пунктов меню, которые у вас появляются, или представить«исправление» для этого, некоторые из которых можно найти здесь - http://www.brunildo.org/test/InlineBlockLayout.html.