在导航栏中定位的用户名无法在IE中正确显示

Question

位于右侧的导航栏中的用户名在firefox和chrome中完美显示。但是，在IE中，用户名会因为破坏标记出现问题而下降。

有没有办法在IE中解决这个问题，所以它可以像firefox和chrome一样显示它？

body {
		   padding-top: 102px;
		   background-color: #4d4d4d;
		   font-family: 'Lato', verdana, sans-serif;
		   color: #010101;
		 }
		 .container {
		   width: 1530px;
		   margin-top: 0;
		 }
		 .navbar-fixed-top {
		   background-color: #fff;
		 }
		 .navbar-default .navbar-header {
		   min-height: 80px;
		 }
		 .navbar-default .navbar-header button.hamburger-icon {
		   margin-top: 20px;
		 }
		 .navbar-default .navbar-brand {
		   color: #010101;
		   padding-top: 5px;
		 }
		 /* searchbox */
		 .navbar-nav > .dropdown.search .input-group {
		   padding-top: 15px;
		 }
		 .navbar-nav > .dropdown.search .input-group input.form-control {
		   padding: 0 10px 0 0;
		   background-color: #fff;
		   color: #010101;
		   border-radius: 0;
		   border: 0;
		   box-shadow: none;
		   font-size: 16px;
		   font-weight: 100;
		 }
		 .navbar-nav > .dropdown.search .input-group input.form-control:hover {
		   background-color: #fff;
		 }
		 .navbar-nav > .dropdown.search .input-group-btn button {
		   padding: 2px;
		   border: 0;
		   box-shadow: none;
		   background-color: #fff;
		   border-radius: 0;
		 }
		 .navbar-nav > .dropdown.search .input-group-btn button:hover {
		   background-color: #fff;
		   color: #ff5500;
		 }
		 .navbar-nav > .dropdown.search .input-group-btn .glyphicon-search {
		   font-size: 22px;
		 }
		 /* bell notification and dropdown */
		 .navbar-default .navbar-nav > .open > a.inbox,
		 .navbar-default .navbar-nav > .open > a.inbox:focus,
		 .navbar-default .navbar-nav > .open > a.inbox:hover {
		   background-color: #fff;
		   padding-top: 15px;
		   margin-bottom: 5px;
		 }
		 .nav > li.dropdown.bell > a:hover,
		 .nav > li.dropdown.bell > a:focus {
		   color: #ff5500;
		   background-color: transparent;
		 }
		 .navbar-nav > .dropdown.bell li a:hover {
		   color: #ff5500;
		   background-color: transparent;
		 }
		 .navbar-nav > .dropdown.bell .badge-count {
		   background: #ff5500;
		   margin-top: -24px;
		   margin-left: -20px;
		   height: 1.7em;
		 }
		 .navbar-nav > li > .dropdown-menu.bell {
		   background-color: #f8f8f8;
		   border-radius: 0;
		 }
		 .navbar-nav > li > .dropdown-menu.bell li a {
		   padding-top: 5px;
		   padding-bottom: 5px;
		   white-space: normal !important;
		   width: 350px;
		 }
		 .navbar-nav > li > .dropdown-menu.bell li a span.info {
		   display: block;
		   padding: 0 5px 0 5px;
		 }
		 .navbar-nav > li > .dropdown-menu.bell li.divider {
		   padding: 0;
		   margin: 0 20px;
		 }
		 .navbar-nav > li > .dropdown-menu.bell .label {
		   background-color: transparent;
		   color: #aaa;
		   font-weight: 100;
		 }
		 /* bell notification and dropdown caret */
		 .navbar-nav > li > .dropdown-menu.bell:before {
		   position: absolute;
		   top: -10px;
		   right: 9%;
		   display: inline-block;
		   border-right: 10px solid transparent;
		   border-bottom: 10px solid #ccc;
		   border-left: 10px solid transparent;
		   border-bottom-color: rgba(0, 0, 0, 0.2);
		   content: '';
		 }
		 .navbar-nav > li > .dropdown-menu.bell:after {
		   position: absolute;
		   top: -9px;
		   right: 9%;
		   display: inline-block;
		   border-right: 9px solid transparent;
		   border-bottom: 9px solid #f8f8f8;
		   border-left: 9px solid transparent;
		   content: '';
		 }
		 /* create profile button */
		 .navbar-nav > .dropdown.create-profile a.create-profile-btn {
		   width: 200px;
		   padding: 12px;
		   margin-top: 18px;
		 }
		 .navbar-nav > .dropdown.create-profile a.btn-default {
		   background-color: #ff5500;
		   border-color: #ff5500;
		   color: #fff;
		 }
		 .navbar-nav > .dropdown.create-profile a.btn-default:hover,
		 .navbar-nav > .dropdown.create-profile a.btn-default:focus,
		 .navbar-nav > .dropdown.create-profile a.btn-default:active {
		   color: #fff;
		   border-color: 0;
		   /*set the color you want here*/
		 }
		 /* user login and dropdown */
		 .navbar-nav > .user-logged-in span.firstname {
		   font-size: 16px;
		   color: #010101;
		 }
		 .navbar-nav > .user-logged-in span.surname {
		   font-size: 16px;
		   color: #010101;
		 }
		 .navbar-nav > .user-logged-in .dropdown-menu.access-list {
		   width: 100%;
		   border-radius: 0;
		   border: 0;
		   background-color: #f8f8f8;
		   font-size: 14px;
		 }
		 .navbar-nav > .user-logged-in .dropdown-menu.access-list li a {
		   margin: 5px 0px;
		   color: #010101;
		 }
		 .navbar-nav > .user-logged-in .dropdown-menu.access-list li a:hover {
		   background-color: transparent;
		   color: #ff5500;
		 }
		 .navbar-nav > .user-logged-in .dropdown-menu.access-list li.divider {
		   padding: 0;
		   margin: 0 20px;
		 }
		 .fullname {
		   float: right;
		   padding-right: 10px;
		 }
		 .drop-arr {
		   float: right;
		   padding-top: 10px;
		 }
		 span.avatar {
		   padding-right: 90px;
		 }
		 /* Large desktop */
		 @media (max-width: 1590px) {
		   .container {
		     width: auto;
		   }
		 }
		 /* Portrait tablet to landscape and desktop */
		 @media (max-width: 979px) {}
		 /* Landscape phone to portrait tablet */
		 @media (max-width: 768px) {
		   .container {
		     width: auto;
		   }
		   .navbar-default .navbar-brand {
		     font-size: 40px;
		   }
		   /* bell notification and dropdown */
		   .navbar-default .navbar-nav > .open > a.inbox,
		   .navbar-default .navbar-nav > .open > a.inbox:focus,
		   .navbar-default .navbar-nav > .open > a.inbox:hover {
		     width: 100% !important;
		     background-color: #e7e7e7;
		     margin-bottom: 0px;
		   }
		   .navbar-nav > li > .dropdown-menu.bell li a {
		     width: 100%;
		   }
		   .navbar-nav > li > .dropdown-menu.bell:before,
		   .navbar-nav > li > .dropdown-menu.bell:after {
		     display: none;
		   }
		   .navbar-nav > li > .dropdown-menu.bell li a {
		     text-align: left;
		   }
		   .navbar-nav > .dropdown.bell,
		   .navbar-nav > .user-logged-in {
		     text-align: center;
		   }
		   /* searchbox */
		   .navbar-nav > .dropdown.search {
		     padding-left: 10px;
		     padding-right: 10px;
		     margin-top: 0;
		     width: 100%;
		     overflow: hidden;
		   }
		   .navbar-nav > .dropdown.search .input-group {
		     padding-top: 0;
		   }
		 }
		 /* Landscape phones and down */
		 @media (max-width: 480px) {
		   .navbar-default .navbar-brand {
		     font-size: 30px;
		   }
		 }

<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>

<div class="container">
  <div class="navbar navbar-default navbar-fixed-top navbar-md" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle hamburger-icon" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span> 
        </button>
        <h1>
				<a href="#" class="navbar-brand"><img src="logo.png" height="30" width="180"></a>
			</h1>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">

          <!-- search bar -->
          <li class="dropdown search">
            <form class="navbar-form" role="search">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Search name or keyword" name="q">
                <div class="input-group-btn">
                  <button class="btn btn-default" type="submit">
                    <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-128.png" height="30" width="30" class=" avatar-img img-square">
                  </button>
                </div>
              </div>
            </form>
          </li>

          <!-- notification bell -->
          <li class="dropdown bell">
            <a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
              <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-bell-outline-128.png" height="45" width="45" class=" avatar-img img-square">
              <span class="badge badge-count">1</span>
            </a>
            <ul class="dropdown-menu bell" role="menu">
              <li><a href="#"><span class="label label-default">4:00 AM</span><span class="info">Favourites Snippet</span></a>
              </li>
              <li class="divider"></li>
              <li><a href="#"><span class="label label-warning">4:30 AM</span><span class="info">Email marketing</span></a>
              </li>
              <li class="divider"></li>
              <li><a href="#"><span class="label label-warning">5:00 AM</span>
							<span class="info">
								Subscriber focused email design
								Extra sample line
								Extra sample line
								Extra sample line
							</span></a>
              </li>
              <li class="divider"></li>
              <li><a href="#" class="text-center">View All</a>
              </li>
            </ul>
          </li>

          <!-- create profile button -->
          <!-- <li class="dropdown create-profile">
					<a class="btn btn-default btn-lg create-profile-btn" href="#" role="button">Create a profile</a>
				</li> -->

          <!-- user login information -->
          <li class="dropdown user-logged-in">
            <a href="#" class="dropdown-toggle username" data-toggle="dropdown">
              <span class="avatar"><img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-128.png" height="50" width="50" ></span>
              <span class="drop-arr"><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png" height="20" width="20" ></span>
              <span class="fullname">
							<span class="firstname">firstname</span>
              <br><span class="surname">lastname</span>
              </span>

            </a>

            <ul class="dropdown-menu access-list" role="menu">
						<li><a href="#">fsfsdfsddf</a></li>
						<li class="divider"></li>
						<li><a href="#">fsfsdsdd</a></li>
						<li class="divider"></li>
						<li><a href="#">sfssdsdds</a></li>
						<li class="divider"></li>
						<li><a href="#">fsfsdfsd</a></li>
						<li class="divider"></li>
						<li><a href="#">sdfsdfsdd</a></li>
                  </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>


<div class="container">
  <div class="row">
    <div class="col-md-12">
      <p>dfsjfhskfs</p>


      <!-- <div class="chevron right">
			  <a href="#"></a>
			</div>

			<div style="height: 1em;">
			</div> -->




    </div>
  </div>
</div>

</div>

Answer 1

将inline-block添加到用户名类，将其修复为 IE11 。在当前版本的Firefox，Opera，EDGE，Chrome + Canary中进行了测试。

.navbar-nav > .user-logged-in .username {
    display: inline-block;
}

实施例：

body {
  padding-top: 102px;
  background-color: #4d4d4d;
  font-family: 'Lato', verdana, sans-serif;
  color: #010101;
}
.container {
  width: 1530px;
  margin-top: 0;
}
.navbar-fixed-top {
  background-color: #fff;
}
.navbar-default .navbar-header {
  min-height: 80px;
}
.navbar-default .navbar-header button.hamburger-icon {
  margin-top: 20px;
}
.navbar-default .navbar-brand {
  color: #010101;
  padding-top: 5px;
}
/* searchbox */

.navbar-nav > .dropdown.search .input-group {
  padding-top: 15px;
}
.navbar-nav > .dropdown.search .input-group input.form-control {
  padding: 0 10px 0 0;
  background-color: #fff;
  color: #010101;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  font-size: 16px;
  font-weight: 100;
}
.navbar-nav > .dropdown.search .input-group input.form-control:hover {
  background-color: #fff;
}
.navbar-nav > .dropdown.search .input-group-btn button {
  padding: 2px;
  border: 0;
  box-shadow: none;
  background-color: #fff;
  border-radius: 0;
}
.navbar-nav > .dropdown.search .input-group-btn button:hover {
  background-color: #fff;
  color: #ff5500;
}
.navbar-nav > .dropdown.search .input-group-btn .glyphicon-search {
  font-size: 22px;
}
/* bell notification and dropdown */

.navbar-default .navbar-nav > .open > a.inbox,
.navbar-default .navbar-nav > .open > a.inbox:focus,
.navbar-default .navbar-nav > .open > a.inbox:hover {
  background-color: #fff;
  padding-top: 15px;
  margin-bottom: 5px;
}
.nav > li.dropdown.bell > a:hover,
.nav > li.dropdown.bell > a:focus {
  color: #ff5500;
  background-color: transparent;
}
.navbar-nav > .dropdown.bell li a:hover {
  color: #ff5500;
  background-color: transparent;
}
.navbar-nav > .dropdown.bell .badge-count {
  background: #ff5500;
  margin-top: -24px;
  margin-left: -20px;
  height: 1.7em;
}
.navbar-nav > li > .dropdown-menu.bell {
  background-color: #f8f8f8;
  border-radius: 0;
}
.navbar-nav > li > .dropdown-menu.bell li a {
  padding-top: 5px;
  padding-bottom: 5px;
  white-space: normal !important;
  width: 350px;
}
.navbar-nav > li > .dropdown-menu.bell li a span.info {
  display: block;
  padding: 0 5px 0 5px;
}
.navbar-nav > li > .dropdown-menu.bell li.divider {
  padding: 0;
  margin: 0 20px;
}
.navbar-nav > li > .dropdown-menu.bell .label {
  background-color: transparent;
  color: #aaa;
  font-weight: 100;
}
/* bell notification and dropdown caret */

.navbar-nav > li > .dropdown-menu.bell:before {
  position: absolute;
  top: -10px;
  right: 9%;
  display: inline-block;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ccc;
  border-left: 10px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}
.navbar-nav > li > .dropdown-menu.bell:after {
  position: absolute;
  top: -9px;
  right: 9%;
  display: inline-block;
  border-right: 9px solid transparent;
  border-bottom: 9px solid #f8f8f8;
  border-left: 9px solid transparent;
  content: '';
}
/* create profile button */

.navbar-nav > .dropdown.create-profile a.create-profile-btn {
  width: 200px;
  padding: 12px;
  margin-top: 18px;
}
.navbar-nav > .dropdown.create-profile a.btn-default {
  background-color: #ff5500;
  border-color: #ff5500;
  color: #fff;
}
.navbar-nav > .dropdown.create-profile a.btn-default:hover,
.navbar-nav > .dropdown.create-profile a.btn-default:focus,
.navbar-nav > .dropdown.create-profile a.btn-default:active {
  color: #fff;
  border-color: 0;
  /*set the color you want here*/
}
/* user login and dropdown */

.navbar-nav > .user-logged-in .username {
  display: inline-block;
}
.navbar-nav > .user-logged-in span.firstname {
  font-size: 16px;
  color: #010101;
}
.navbar-nav > .user-logged-in span.surname {
  font-size: 16px;
  color: #010101;
}
.navbar-nav > .user-logged-in .dropdown-menu.access-list {
  width: 100%;
  border-radius: 0;
  border: 0;
  background-color: #f8f8f8;
  font-size: 14px;
}
.navbar-nav > .user-logged-in .dropdown-menu.access-list li a {
  margin: 5px 0px;
  color: #010101;
}
.navbar-nav > .user-logged-in .dropdown-menu.access-list li a:hover {
  background-color: transparent;
  color: #ff5500;
}
.navbar-nav > .user-logged-in .dropdown-menu.access-list li.divider {
  padding: 0;
  margin: 0 20px;
}
.fullname {
  float: right;
  padding-right: 10px;
}
.fullname span {
  display: block;
}
.drop-arr {
  float: right;
  padding-top: 10px;
}
span.avatar {
  padding-right: 90px;
}
/* Large desktop */

@media (max-width: 1590px) {
  .container {
    width: auto;
  }
}
/* Portrait tablet to landscape and desktop */

@media (max-width: 979px) {}
/* Landscape phone to portrait tablet */

@media (max-width: 768px) {
  .container {
    width: auto;
  }
  .navbar-default .navbar-brand {
    font-size: 40px;
  }
  /* bell notification and dropdown */
  .navbar-default .navbar-nav > .open > a.inbox,
  .navbar-default .navbar-nav > .open > a.inbox:focus,
  .navbar-default .navbar-nav > .open > a.inbox:hover {
    width: 100% !important;
    background-color: #e7e7e7;
    margin-bottom: 0px;
  }
  .navbar-nav > li > .dropdown-menu.bell li a {
    width: 100%;
  }
  .navbar-nav > li > .dropdown-menu.bell:before,
  .navbar-nav > li > .dropdown-menu.bell:after {
    display: none;
  }
  .navbar-nav > li > .dropdown-menu.bell li a {
    text-align: left;
  }
  .navbar-nav > .dropdown.bell,
  .navbar-nav > .user-logged-in {
    text-align: center;
  }
  /* searchbox */
  .navbar-nav > .dropdown.search {
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 0;
    width: 100%;
    overflow: hidden;
  }
  .navbar-nav > .dropdown.search .input-group {
    padding-top: 0;
  }
}
/* Landscape phones and down */

@media (max-width: 480px) {
  .navbar-default .navbar-brand {
    font-size: 30px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="navbar navbar-default navbar-fixed-top navbar-md" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle hamburger-icon" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <h1>
				<a href="#" class="navbar-brand"><img src="http://placehold.it/180x30/000" height="30" width="180"></a>
			</h1>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown search">
            <form class="navbar-form" role="search">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Search name or keyword" name="q">
                <div class="input-group-btn">
                  <button class="btn btn-default" type="submit">
                    <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-128.png" height="30" width="30" class=" avatar-img img-square">
                  </button>
                </div>
              </div>
            </form>
          </li>
          <li class="dropdown bell">
            <a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
              <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-bell-outline-128.png" height="45" width="45" class=" avatar-img img-square">
              <span class="badge badge-count">1</span>
            </a>
            <ul class="dropdown-menu bell" role="menu">
              <li>
                <a href="#">
                  <span class="label label-default">4:00 AM</span>
                  <span class="info">Favourites Snippet</span>
                </a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">
                  <span class="label label-warning">4:30 AM</span>
                  <span class="info">Email marketing</span>
                </a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">
                  <span class="label label-warning">5:00 AM</span>
                  <span class="info">
								Subscriber focused email design
								Extra sample line
								Extra sample line
								Extra sample line
							</span>
                </a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#" class="text-center">View All</a>
              </li>
            </ul>
          </li>
          <li class="dropdown user-logged-in">
            <a href="#" class="dropdown-toggle username" data-toggle="dropdown">
              <span class="avatar">
                                      <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-128.png" height="50" width="50" >
                                 </span>
              <span class="drop-arr">
                                      <img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png" height="20" width="20" >
                                </span>  <span class="fullname">
							         <span class="firstname">John</span>

              <span class="surname">Smith</span>
              </span>
            </a>
            <ul class="dropdown-menu access-list" role="menu">
              <li>
                <a href="#">Right</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">Right</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">Right</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">Right</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">Right</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <p>dfsjfhskfs</p>
    </div>
  </div>
</div>