ios chromeと線の高さが一致しません

Question

line-heightを使用して、携帯端末の要素を垂直に配置しますheader。

すべてがChromeのデスクトップ、Safariモバイルでうまくいっています。ただし、Chromeでは、headerの要素を垂直に配置しません。 Googleのクロムと（要素が整列）サファリ

で

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

あなたは今、あなたはvertical-align:middleを使用することができますので、デフォルトではbaselineですので、あなたもvertical-align:middleimgを設定することができますspanでfloat:leftを削除し、display:inline-blockを使用することができます。

.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; 
 
}

<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>