在IE中呈現不同的HTML/CSS

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添加到它，或者顯示：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中的.pull-right類的float: right造成的。我認爲在你的CSS中，右鍵可以超過默認值.nav>li>a的寬度，所以IE11會將它分成兩行。

您也可以通過設置寬度.nav>li>a解決這個問題 - 例如width: 120px;