Why is the code displayed differently in IE11, showing up on two lines for some reason?
The code has been simplified for display purposes here, which may make it look odd visually.
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 styling*/
.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;
}
/*More Bootstrap styling*/
: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;
}
Here is the link to the jsFiddle code