Question

在我的菜单栏中，我有一个使用字体真棒的搜索图标。菜单栏中的每个项目都填充它，但搜索的高度约为其父级的80-85％。这是我的HTML代码

 <html>

  <head>
      <title>main page</title>
        <link rel="stylesheet" href="styles.css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"/>
<style>
 body
{
  margin:0px;
  padding:0px;
}

ul
{
  margin:0px;
  padding:0px;
  background-color:#CC6666;
  overflow:hidden;
  list-style-type:none;
  font-size:18;
  font-weight:bold;
}

li{float:right;}

li a
{
  display:inline-block;
    display:inline-block;
      text-decoration:none;
      color:white;
      text-align:center;
      padding:12px 16px;
      font-weight:400;
      padding-right:15px;
  }
  li a:hover, .dropdown:hover .dropbtn{
      background-color:#666666;
      margin:0px;

  }
  .active{
      background-color:#666666;
  }
   
.search{
  float:left;
}
</style>
  </head>
<body>
   <div class="posi">
  <ul>
    <li><a class="active" herf="home">خانه</a></li>

    <li>
      <a href="#">سوالات متداول</a>
    </li>

    <li>
      <a href="#">عضویت در سایت</a>
    </li>
    <li>
    <a herf="#">معرفی</a></li>
    <li class="search"><a href="#"><i class="fa fa-search"></i></a></li>
 </ul>
    </div>
</html>

This is what I get

我该如何解决这个问题？

Answer 1

您可以添加：

line-height: 1;

到

li a

Answer 2

我相信这是一个特定于chrome的bug，就像safari和firefox一样，似乎不是一个问题。如果其他人可以验证这一点或反驳这一点，请告诉我。我使用的是Chrome版本56.0.2924.87（64位）无论如何 - 这是一个特定于Chrome的解决方案

＆＃13;

// jQuery to add css class "chrome-fix" which changes height of ".search a" to 24 px instead of 22 px
if (navigator.appVersion.indexOf("Chrome/") != -1) {
$(".search a").addClass(".chrome-fix");
}

＆＃13;

body
{
  margin:0px;
  padding:0px;
}

ul
{
  margin:0px;
  padding:0px;
  background-color:#CC6666;
  overflow:hidden;
  list-style-type:none;
  font-size:18px;
  font-weight:bold;
}

li{float:right;}

li a
{
  display:inline-block;
    display:inline-block;
      text-decoration:none;
      color:white;
      text-align:center;
      padding:12px 16px;
      font-weight:400;
      padding-right:15px;
  }
  li a:hover, .dropdown:hover .dropbtn{
      background-color:#666666;
      margin:0px;

  }
  .active{
      background-color:#666666;
  }
   
.search{
  float:left;
  height:41px;
}
.chrome-fix {
    height:24px;
}

＆＃13;

<html>

  <head>
      <title>main page</title>
        <link rel="stylesheet" href="styles.css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"/>

  </head>
<body>
   <div class="posi">
  <ul>
    <li><a class="active" herf="home">خانه</a></li>

    <li>
      <a href="#">سوالات متداول</a>
    </li>

    <li>
      <a href="#">عضویت در سایت</a>
    </li>
    <li>
    <a herf="#">معرفی</a></li>
    <li class="search"><a href="#" class="chrome-fix"><i class="fa fa-search"></i></a></li>
 </ul>
    </div>
</html>

＆＃13;

Font Awesome不填充菜单栏

2 个答案: