Twitter Bootstrap：IE 和 Firefox 中的图标呈现方式不同

Question

我正在使用最新的 twitter Bootstrap（未修改）。下面的 HTML 在 IE 和 Firefox 中产生不同的结果：

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-collapse collapse">          
        <ul class="nav navbar-nav navbar-right">    
            <li><p class="navbar-text">Test</p><a href:"..."> <span class="glyphicon glyphicon glyphicon-refresh"></span></a></li>                              
        </ul>
    </div>
</div>

在 IE 中，图标（或字体，图标现在是字体）在同一行上的文本“test”之后正确呈现。在 Firefox 中，图标呈现在文本下方。我希望两者都在同一行上呈现图标。有谁知道怎么回事？

Answer 1

简短的回答是：IE 做错了。

在您的 <li> 中，您有 2 个块元素，一个 <p> 和一个 <a>。块元素形成块，因此如果您希望它们内联，请将它们更改为内联块，或者如果菜单项不相关，即 Test 与刷新图标不同，请将它们各自放在自己的 <li> 中，像这样：

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-collapse collapse">          
        <ul class="nav navbar-nav navbar-right">    
            <li><p class="navbar-text">Test</p></li>
            <li><a href:"..."> <span class="glyphicon glyphicon glyphicon-refresh"></span></a></li>                              
        </ul>
    </div>
</div>

注释中的注释：<a> 标签通常是内联的，但是 twitter bootstrap css 专门将 <nav> 下的 <a> 标签设置为阻止。 .nav>li>a {display: block;}