是什么让两个CSS属性相同的元素看起来不同

Question

在下面的HTML/CSS页面中，我试图使链接和按钮看起来相同。原因是使用的元素应该遵循其含义(去某个地方还是做某事(，而外观和感觉取决于对用户来说好看的东西。

*,
:after,
:before {
box-sizing: inherit
}
.button {
margin: 0px;
width: 100px;
inline-size: 100px;
padding: 20px;
color: black;
text-decoration: none;
font-family: sans-serif;
align-items: normal;
perspective-origin: 60.8906px 44.5625px;
transform-origin: 60.8984px 44.5625px;
cursor: pointer;
display: inline-block;
min-height: 4em;
outline: 0;
border: none;
vertical-align: baseline;
background: #e0e1e2 none;
font-weight: 700;
line-height: 1em;
text-align: center;
font-size: 1rem
}
.container {
height: 100px;
}

<div class="container">
<a class="button" href="#">A</a>
<button class="button">A</button>
</div>

它们看起来很相似，但在Chrome和Firefox中，它们的垂直排列方式不同。文本似乎在同一个Y上，但它周围的背景框不是。如果他们以某种方式获得不同的CSS属性，可能来自用户代理样式表，我会期望这样的行为。

有趣的是，当我让浏览器(Chrome(显示所有计算的CSS属性时，它们都是相等的。我通过将每个元素的属性复制到一个文件中，然后对文件进行区分来验证这一点。

我还检查了元素的顺序是否相关，但事实并非如此——从某种意义上说，无论链接/按钮出现在元素顺序的哪个位置，它们看起来都是一样的。

为什么所有CSS属性都相同，但元素看起来却不同？需要进行哪些更改才能使它们看起来相同？

(第二个问题旨在确定问题的确切解决方案，而不仅仅是一些"猎枪式方法"。(

Answer 1

两个标签都使用了flexbox

*,
:after,
:before {
box-sizing: inherit
}
.button {
margin: 0px;
width: 100px;
inline-size: 100px;
padding: 20px;
color: black;
text-decoration: none;
font-family: sans-serif;
align-items: normal;
perspective-origin: 60.8906px 44.5625px;
transform-origin: 60.8984px 44.5625px;
cursor: pointer;
display: inline-block;
min-height: 4em;
outline: 0;
border: none;
vertical-align: baseline;
background: #e0e1e2 none;
font-weight: 700;
line-height: 1em;
text-align: center;
font-size: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.container {
height: 100px;
}

<div class="container">
<a class="button" href="#">A</a>
<button class="button">A</button>
</div>

Answer 2

您只需对这两个元素使用a或button标记，然后使用javascript 处理它们的行为