Как визуализировать кнопку аналогично в Safari и Chrome?

Question

Учитывая следующий код:

.test {
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  background: initial;
  font-size: 11px;
  border: 1px solid black;
  margin-left: 20px;
}

.test::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: red;
}

<button class="test">Some Text Content</button>

В Chrome он отображается как (требуется горячий):

В Safari это отображается как:

Итак, в Safari он не центрирован по вертикали, а блок имеет другой размер.

Основной вопрос - как его центрировать вертикально в Safari?

Вторичный вопрос: как сделать блоки абсолютно похожими?

Я пробовал display: flex; align-items: center;, vertical-align: center;, изменив высоту строки - ничего из это, казалось, сработало ...

Answer 1

.btn {
border:1px solid #000;
box-sizing:border-box;
color:#000;
display:inline-block;
font:1rem/1.5 sans-serif;
height:2rem;
padding:0 1rem;
text-align:center;
vertical-align:middle;
width:auto;
}