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中，图标（或字体，图标现在为几天的字体）在文本＆＃34; test＆＃34;之后正确呈现。在同一条线上。在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>。 1}}，像这样：

<a>

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

Twitter Bootstrap：在IE与Firefox中呈现不同的图标

1 个答案: