在IE

Question

这是Chrome中Internet Explorer显示的方式，在Chrome，Firefox和Opera以及Safari中，字体真棒图标正确排列，但它在IE中正在向下移动。我尝试了几种方法，但它仍然在IE中向下移动。我是网页设计的初学者。

这是我的HTML代码。

.navbar-default {
  padding: 30px 0 30px 0;
  background-color: #fff;
  border-bottom: 1px solid #D5D5D5;
  width: 100%;
  margin: 0;
}

.navbar-right {
  font-family: 'Fira Sans Condensed', sans-serif;
  font-size: 16px;
  font-weight: 500;
}

.icon::after {
  content: "\f107";
  /* this is your text. You can also use UTF-8 character codes as I do here */
  font-family: FontAwesome;
  float: right;
  padding-left: 5px;
  color: red;
  display: inline;
}

.icon2:after {
  content: "\f106";
  /* this is your text. You can also use UTF-8 character codes as I do here */
  font-family: FontAwesome;
  float: right;
  padding-left: 5px;
  color: red;
  display: inline-block;
}

.search:after {
  content: "\f002";
  /* this is your text. You can also use UTF-8 character codes as I do here */
  font-family: FontAwesome;
  padding-left: 5px;
  color: black;
  font-size: 1.5em;
  float: right;
}

.navbar-default .navbar-nav>li>a {
  color: black;
  /*Sets the text hover color on navbar*/
  padding-bottom: 6px;
  /*display: flex;*/
}

.navbar-default .navbar-brand {
  color: #000000;
}

.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
  color: red;
}

.navbar-nav {
  display: inline;
  margin-left: 20px;
}

<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:400,500" rel="stylesheet">

<nav class="navbar navbar-default new">
  <div class="container">
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#" class="icon">ABOUT</a></li>
      <li><a href="#" class="icon">HOME</a></li>
      <li><a href="#" class="icon">CONTACT </a></li>
      <li><a href="#" class="icon">ADDRESS </a></li>
      <li>
        <a href="JavaScript:void(0);" class="search"></a>
      </li>
    </ul>
  </div>
</nav>

Answer 1

添加以下css：

    .nav li a {
      display: inline !important;
    }

Answer 2

从float:right课程中删除样式.icon::after。因为您已经在课后添加了这些样式。因此它会在文本后自动对齐。这在IE中引起了问题。

.icon:after {
  content: "\f107";  
  font-family: FontAwesome;
  /*float: right;*/
  padding-left: 5px;
  color: red;
  display: inline;
}

DEMO