如何在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;
}