css - 推特 Bootstrap : Icon rendered differently in IE vs 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 个 block 元素，一个 <p>和一个 <a> . block 元素构成 block ，因此如果您希望它们内联，要么将它们更改为内联 block ，要么如果菜单项不相关，即 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 专门设置了 <a> <nav> 中的标签在 <li> 下阻止。 .nav>li>a {display: block;}