行高不适用于ios chrome

Question

我正在使用line-height垂直对齐我的手机header上的元素。

使用Chrome桌面，Safari移动设备，一切都很好用。但Chrome不会垂直对齐header中的元素。

使用safari（元素对齐）

使用Google Chrome（元素未对齐）

HTML

<header class="header">

<div class="header-content">

<span class="left">
    <a class="button red">Menu</a>
</span>

<span class="center">
    <img src="logo.png">
</span>

<span class="right">
    <a class="button red">Login</a>
</span>


</div>

CSS

.button{
  font: normal 12px Verdana,Helvetica,Arial,sans-serif;
  margin: 0px;
  display: inline-block;
  background-color: #f5f5f5;
  background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
  color: #444;
  border: 1px solid #dcdcdc;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
  height: 33px;
  line-height: 33px;
  min-width: 25px;
  padding: 0 8px;
  text-decoration: none;
}
.header{
  font: normal 12px Verdana,Helvetica,Arial,sans-serif;
  max-width: 100%;
  height: 50px;
  line-height: 50px !important;
  background-color: #fff;
  -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  border-bottom: 1px solid #cbcbcb;
}
.header-content{
  max-width: 480px;
  margin: 0 auto;
  padding: 0px 10px;
}
.header-content span{
  float:left;
  width: 33%;
}
.header-content .left{
  text-align: left;
}
.header-content .center{
  text-align: center;
}
.header-content .right{
  text-align: right;
}
.header-content img{
  width: 140px;
}

Answer 1

您可以移除float:left中的span并使用display:inline-block，因为现在您可以使用vertical-align:middle，然后您也可以设置vertical-align:middle img }因为默认情况下是baseline。

＆＃13;

＆＃13;

.button {
  font: normal 12px Verdana, Helvetica, Arial, sans-serif;
  margin: 0px;
  display: inline-block;
  background-color: #f5f5f5;
  background-image: linear-gradient(top, #f5f5f5, #f1f1f1);
  color: #444;
  border: 1px solid #dcdcdc;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
  height: 33px;
  line-height: 33px;
  min-width: 25px;
  padding: 0 8px;
  text-decoration: none;
  vertical-align: middle
}
.header {
  max-width: 100%;
  height: 50px;
  line-height: 50px !important;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid #cbcbcb;
}
.header-content {
  max-width: 480px;
  margin: 0 auto;
  padding: 0px 10px;
  font-size: 0 /* inline-block fix gap*/
}
.header-content span {
  display: inline-block; 
  width: calc(100% / 3); /* 33.3% */
  font: normal 12px Verdana, Helvetica, Arial, sans-serif;
}
.header-content .left {
  text-align: left;
}
.header-content .center {
  text-align: center;
}
.header-content .right {
  text-align: right;
}
.header-content img {
  width: 140px;
  vertical-align: middle;
}

＆＃13;

<header class="header">
  <div class="header-content">
    <span class="left">
      <a class="button red">Menu</a>
     </span>
    <span class="center">
      <img src="//dummyimage.com/140x33&text=image">
    </span>
    <span class="right">
      <a class="button red">Login</a>
     </span>
  </div>
</header>

＆＃13;

＆＃13;

＆＃13;