css - 为什么相同的行高在两个不同的 Chrome 版本中呈现不同？

Question

<分区>

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>