0
Имя пользователя в навигационной панели, расположенной справа, отлично отображается в firefox и chrome. Однако в IE имя пользователя падает, так как оно имеет проблему с тегом break.Позиционированное имя пользователя в navbar не отображается правильно в IE
Есть ли способ исправить это в IE, чтобы он отображал его как firefox и chrome?
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>