0
位於右側的導航欄中的用戶名在Firefox和Chrome中完美顯示。但是，在IE中，用戶名稱會下降，因爲它與中斷標記有關。在導航欄中放置用戶名在IE中不能正確顯示
有沒有辦法解決這個問題，所以它可以顯示它像Firefox和鉻？
body {
\t \t padding-top: 102px;
\t \t background-color: #4d4d4d;
\t \t font-family: 'Lato', verdana, sans-serif;
\t \t color: #010101;
\t \t }
\t \t .container {
\t \t width: 1530px;
\t \t margin-top: 0;
\t \t }
\t \t .navbar-fixed-top {
\t \t background-color: #fff;
\t \t }
\t \t .navbar-default .navbar-header {
\t \t min-height: 80px;
\t \t }
\t \t .navbar-default .navbar-header button.hamburger-icon {
\t \t margin-top: 20px;
\t \t }
\t \t .navbar-default .navbar-brand {
\t \t color: #010101;
\t \t padding-top: 5px;
\t \t }
\t \t /* searchbox */
\t \t .navbar-nav > .dropdown.search .input-group {
\t \t padding-top: 15px;
\t \t }
\t \t .navbar-nav > .dropdown.search .input-group input.form-control {
\t \t padding: 0 10px 0 0;
\t \t background-color: #fff;
\t \t color: #010101;
\t \t border-radius: 0;
\t \t border: 0;
\t \t box-shadow: none;
\t \t font-size: 16px;
\t \t font-weight: 100;
\t \t }
\t \t .navbar-nav > .dropdown.search .input-group input.form-control:hover {
\t \t background-color: #fff;
\t \t }
\t \t .navbar-nav > .dropdown.search .input-group-btn button {
\t \t padding: 2px;
\t \t border: 0;
\t \t box-shadow: none;
\t \t background-color: #fff;
\t \t border-radius: 0;
\t \t }
\t \t .navbar-nav > .dropdown.search .input-group-btn button:hover {
\t \t background-color: #fff;
\t \t color: #ff5500;
\t \t }
\t \t .navbar-nav > .dropdown.search .input-group-btn .glyphicon-search {
\t \t font-size: 22px;
\t \t }
\t \t /* bell notification and dropdown */
\t \t .navbar-default .navbar-nav > .open > a.inbox,
\t \t .navbar-default .navbar-nav > .open > a.inbox:focus,
\t \t .navbar-default .navbar-nav > .open > a.inbox:hover {
\t \t background-color: #fff;
\t \t padding-top: 15px;
\t \t margin-bottom: 5px;
\t \t }
\t \t .nav > li.dropdown.bell > a:hover,
\t \t .nav > li.dropdown.bell > a:focus {
\t \t color: #ff5500;
\t \t background-color: transparent;
\t \t }
\t \t .navbar-nav > .dropdown.bell li a:hover {
\t \t color: #ff5500;
\t \t background-color: transparent;
\t \t }
\t \t .navbar-nav > .dropdown.bell .badge-count {
\t \t background: #ff5500;
\t \t margin-top: -24px;
\t \t margin-left: -20px;
\t \t height: 1.7em;
\t \t }
\t \t .navbar-nav > li > .dropdown-menu.bell {
\t \t background-color: #f8f8f8;
\t \t border-radius: 0;
\t \t }
\t \t .navbar-nav > li > .dropdown-menu.bell li a {
\t \t padding-top: 5px;
\t \t padding-bottom: 5px;
\t \t white-space: normal !important;
\t \t width: 350px;
\t \t }
\t \t .navbar-nav > li > .dropdown-menu.bell li a span.info {
\t \t display: block;
\t \t padding: 0 5px 0 5px;
\t \t }
\t \t .navbar-nav > li > .dropdown-menu.bell li.divider {
\t \t padding: 0;
\t \t margin: 0 20px;
\t \t }
\t \t .navbar-nav > li > .dropdown-menu.bell .label {
\t \t background-color: transparent;
\t \t color: #aaa;
\t \t font-weight: 100;
\t \t }
\t \t /* bell notification and dropdown caret */
\t \t .navbar-nav > li > .dropdown-menu.bell:before {
\t \t position: absolute;
\t \t top: -10px;
\t \t right: 9%;
\t \t display: inline-block;
\t \t border-right: 10px solid transparent;
\t \t border-bottom: 10px solid #ccc;
\t \t border-left: 10px solid transparent;
\t \t border-bottom-color: rgba(0, 0, 0, 0.2);
\t \t content: '';
\t \t }
\t \t .navbar-nav > li > .dropdown-menu.bell:after {
\t \t position: absolute;
\t \t top: -9px;
\t \t right: 9%;
\t \t display: inline-block;
\t \t border-right: 9px solid transparent;
\t \t border-bottom: 9px solid #f8f8f8;
\t \t border-left: 9px solid transparent;
\t \t content: '';
\t \t }
\t \t /* create profile button */
\t \t .navbar-nav > .dropdown.create-profile a.create-profile-btn {
\t \t width: 200px;
\t \t padding: 12px;
\t \t margin-top: 18px;
\t \t }
\t \t .navbar-nav > .dropdown.create-profile a.btn-default {
\t \t background-color: #ff5500;
\t \t border-color: #ff5500;
\t \t color: #fff;
\t \t }
\t \t .navbar-nav > .dropdown.create-profile a.btn-default:hover,
\t \t .navbar-nav > .dropdown.create-profile a.btn-default:focus,
\t \t .navbar-nav > .dropdown.create-profile a.btn-default:active {
\t \t color: #fff;
\t \t border-color: 0;
\t \t /*set the color you want here*/
\t \t }
\t \t /* user login and dropdown */
\t \t .navbar-nav > .user-logged-in span.firstname {
\t \t font-size: 16px;
\t \t color: #010101;
\t \t }
\t \t .navbar-nav > .user-logged-in span.surname {
\t \t font-size: 16px;
\t \t color: #010101;
\t \t }
\t \t .navbar-nav > .user-logged-in .dropdown-menu.access-list {
\t \t width: 100%;
\t \t border-radius: 0;
\t \t border: 0;
\t \t background-color: #f8f8f8;
\t \t font-size: 14px;
\t \t }
\t \t .navbar-nav > .user-logged-in .dropdown-menu.access-list li a {
\t \t margin: 5px 0px;
\t \t color: #010101;
\t \t }
\t \t .navbar-nav > .user-logged-in .dropdown-menu.access-list li a:hover {
\t \t background-color: transparent;
\t \t color: #ff5500;
\t \t }
\t \t .navbar-nav > .user-logged-in .dropdown-menu.access-list li.divider {
\t \t padding: 0;
\t \t margin: 0 20px;
\t \t }
\t \t .fullname {
\t \t float: right;
\t \t padding-right: 10px;
\t \t }
\t \t .drop-arr {
\t \t float: right;
\t \t padding-top: 10px;
\t \t }
\t \t span.avatar {
\t \t padding-right: 90px;
\t \t }
\t \t /* Large desktop */
\t \t @media (max-width: 1590px) {
\t \t .container {
\t \t width: auto;
\t \t }
\t \t }
\t \t /* Portrait tablet to landscape and desktop */
\t \t @media (max-width: 979px) {}
\t \t /* Landscape phone to portrait tablet */
\t \t @media (max-width: 768px) {
\t \t .container {
\t \t width: auto;
\t \t }
\t \t .navbar-default .navbar-brand {
\t \t font-size: 40px;
\t \t }
\t \t /* bell notification and dropdown */
\t \t .navbar-default .navbar-nav > .open > a.inbox,
\t \t .navbar-default .navbar-nav > .open > a.inbox:focus,
\t \t .navbar-default .navbar-nav > .open > a.inbox:hover {
\t \t width: 100% !important;
\t \t background-color: #e7e7e7;
\t \t margin-bottom: 0px;
\t \t }
\t \t .navbar-nav > li > .dropdown-menu.bell li a {
\t \t width: 100%;
\t \t }
\t \t .navbar-nav > li > .dropdown-menu.bell:before,
\t \t .navbar-nav > li > .dropdown-menu.bell:after {
\t \t display: none;
\t \t }
\t \t .navbar-nav > li > .dropdown-menu.bell li a {
\t \t text-align: left;
\t \t }
\t \t .navbar-nav > .dropdown.bell,
\t \t .navbar-nav > .user-logged-in {
\t \t text-align: center;
\t \t }
\t \t /* searchbox */
\t \t .navbar-nav > .dropdown.search {
\t \t padding-left: 10px;
\t \t padding-right: 10px;
\t \t margin-top: 0;
\t \t width: 100%;
\t \t overflow: hidden;
\t \t }
\t \t .navbar-nav > .dropdown.search .input-group {
\t \t padding-top: 0;
\t \t }
\t \t }
\t \t /* Landscape phones and down */
\t \t @media (max-width: 480px) {
\t \t .navbar-default .navbar-brand {
\t \t font-size: 30px;
\t \t }
\t \t }<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>
\t \t \t \t <a href="#" class="navbar-brand"><img src="logo.png" height="30" width="180"></a>
\t \t \t </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>
\t \t \t \t \t \t \t <span class="info">
\t \t \t \t \t \t \t \t Subscriber focused email design
\t \t \t \t \t \t \t \t Extra sample line
\t \t \t \t \t \t \t \t Extra sample line
\t \t \t \t \t \t \t \t Extra sample line
\t \t \t \t \t \t \t </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">
\t \t \t \t \t <a class="btn btn-default btn-lg create-profile-btn" href="#" role="button">Create a profile</a>
\t \t \t \t </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">
\t \t \t \t \t \t \t <span class="firstname">firstname</span>
<br><span class="surname">lastname</span>
</span>
</a>
<ul class="dropdown-menu access-list" role="menu">
\t \t \t \t \t \t <li><a href="#">fsfsdfsddf</a></li>
\t \t \t \t \t \t <li class="divider"></li>
\t \t \t \t \t \t <li><a href="#">fsfsdsdd</a></li>
\t \t \t \t \t \t <li class="divider"></li>
\t \t \t \t \t \t <li><a href="#">sfssdsdds</a></li>
\t \t \t \t \t \t <li class="divider"></li>
\t \t \t \t \t \t <li><a href="#">fsfsdfsd</a></li>
\t \t \t \t \t \t <li class="divider"></li>
\t \t \t \t \t \t <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">
\t \t \t <a href="#"></a>
\t \t \t </div>
\t \t \t <div style="height: 1em;">
\t \t \t </div> -->
</div>
</div>
</div>
</div>