CODEWITHSUNDEEP
htmlcssinternet-explorer
Haradzieniec
Haradzieniec

Reputation: 9340

HTML/CSS Renders Differently in IE

Here is the code that is shown differently in IE11. It is displayed in two lines in IE11 for some reason; any reason why it is different in IE11?

The code was simplified to place it here so that's why it, visually, has no sense.

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;
}

Here is the jsFiddle code

Upvotes: 0

Views: 157

Answers (2)

GL.awog
GL.awog

Reputation: 1322

Seems like in IE the link tag doesn't get hasLayout. try to add either float:left to it, or display:inline-block; 

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

or 

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

Demo

Upvotes: 2

Matej Š&#237;pka
Matej Š&#237;pka

Reputation: 190

I would suggest to use nobr tag

<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>

However, I don't know why is this happening... Maybe IE bug?

Edit: It seems the problem is caused by the float: right of the .pull-right class in your css. I think the pull-right can overleap the default value of .nav>li>a width in your css, so IE11 will split it into two lines.

You can also solve this by setting the width for .nav>li>a - for example width: 120px;

Upvotes: 1

Related Questions