html - 如何修复 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 .