为什么相同的行高在两个不同的 Chrome 版本中呈现方式不同?

Question

我显示一个按钮，如下所示：

.button {
height: 44px;
background-color: #FF0000;
display: block;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
border-radius: 5px;
border-top: none !important;
line-height: 42px !important;
}

<div class="button">Text</div>

一切都很完美，除了在移动设备上查看它时：

Android 8.1.0 AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/76.0.3809.132 Mobile Safari/537.36

文本显示div 内部的上方比以下高度高约 2 个像素：

Android 9 AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/77.0.3865.73 Mobile Safari/537.36

为什么会这样呢？它是如何修复的？

Answer 1

您可以尝试在此处依赖 flex 模型：

您可以在手机上测试的几个示例：

.button {
height: 44px;
background-color: #FF0000;
/* display: block; */
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
border-radius: 5px;
border-top: none !important;
/*line-height: 42px !important;*/
}
/* TEST  UPDATE */
.button {
display: flex;
align-items:center;


/* demo purpose */  
/* to show middle */
background-image:linear-gradient(to top, transparent 50%, rgba(0,0,0,0.2) 50%);
}
.fz2 {font-size:2em;}
.fmthm {font-family:verdana;}

<div class="button">Text</div>
<div class="button fz2">Text</div>
<div class="button fmthm fz2">TEXT</div>