如何修复IE 7中没有出现的UI项？

Question

我正在设计一个网站，我在构建导航栏时遇到了与IE7相关的问题。

这是我得到的问题：

您可能会注意到某些菜单项未显示。

我created a Fiddle。 （不确定它在IE7中有帮助，但是： - /，所以我也制作了一个骨架，同样的问题发生在：here it is）

菜单具有以下结构：

<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 UI和图标）：

<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。