Question

以下是在IE11中以不同方式显示的代码。由于某种原因，它在IE11中以两行显示;是什么原因导致IE11不同？

代码被简化为将其置于此处，这就是为什么它在视觉上没有任何意义。

HTML

<ul class="nav navSilver" style="    border: 1px solid green;">
    <li class="dropdown"  style="    border: 1px solid yellow;">
        <a class="dropdown-toggle"  href="javascript:void(0)">
            <i class="fa faSilver fa-caret-down pull-right"></i>Two lines in ie11
        </a>
    </li>
</ul>

CSS

/*bootstrap*/
.clearfix:before, .clearfix:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical>.btn-group:before, .btn-group-vertical>.btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after {
    content: " ";
    display: table;
}
/*bootstrap*/
:before, :after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}



.navSilver > li {
    float: left;
}
.nav>li {
    position: relative;
    display: block;
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

.nav {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}



.navSilver >li > a {
    padding: 10px 8px;
}
.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
}



.fa.pull-right {
    margin-left: .3em;
}
.faSilver {
    margin-top: 3px;
}
.pull-right {
    float: right;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    border: 1px solid red;
}

以下是jsFiddle code

Answer 1

在IE中似乎链接标记没有得到hasLayout。尝试添加float：left to left，或者display：inline-block;

.nav>li>a {
 position: relative;     
 padding: 10px 15px;
 float:left;
}

或

.nav>li>a {
 position: relative;     
 padding: 10px 15px;
 display:inline-block;
}

Demo

Answer 2

我建议使用nobr标签

<ul class="nav navSilver" style="    border: 1px solid green;">
    <li class="dropdown"  style="    border: 1px solid yellow;">
        <a class="dropdown-toggle"  href="javascript:void(0)">
            <nobr><i class="fa faSilver fa-caret-down pull-right"></i>Two lines in ie11</nobr>
        </a>
    </li>
</ul>

但是，我不知道为什么会发生这种情况......也许是IE漏洞？

编辑：似乎问题是由你的CSS中float: right类的.pull-right引起的。我认为右拉可以超过你的css中.nav>li>a宽度的默认值，因此IE11会将它分成两行。

您也可以通过设置.nav>li>a的宽度来解决此问题 - 例如width: 120px;

HTML / CSS在IE中的呈现方式不同

2 个答案: