Html 如何修复IE 7中未出现的UI项？

我正在为一个网站设计工作，在构建导航栏时，我遇到了与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>

导航标题1
导航标题级别2










JS相关






导航h3
测试navi 0








测试navi 1








测试navi 2








另一个标题
测试0








测试1

---

有什么线索可能导致这种情况吗？我怀疑是CSS相关的问题…

这似乎是一个布局问题。您使用了

display:inline块用于将未显示的项目的箭头定位到导航文本左侧。IE7不支持（或者支持得很差，我不记得是哪个）
内联块
，因此您需要将其更改为其他内容，比如对确实出现的菜单项的绝对定位，或者为其引入“修复”，其中一些可以在这里找到-。
非常感谢您的回答和链接文章！你救了我一天！我可以使用display:inline和在项目上强制hasLayout来修复它。
<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>