下面显示的HTML页面具有四个“按钮”。其中两个是真正的按钮标签，但实际上两个是锚点（我故意在其样式中保留了下划线，以便您可以区分它们）。目的是使用btn类对它们进行样式设置，使它们看起来相同并在“按钮栏”中彼此对齐。但是，当您在浏览器中加载页面时，您会注意到按钮和锚点之间的两个区别-按钮具有垂直偏移，其内容位于垂直居中。但是，它们使用相同的样式类，即使当我将计算的样式与浏览器开发人员工具进行比较时，也没有发现任何区别。
那么为什么会发生这种情况？我已经发现不设置overflow和height而是通过padding和font-size进行调整可以用作解决方法。因此，似乎与设置高度有关。但是，为什么在设置时会产生这样的效果？更改overflow属性会奇怪地抵消补偿效果。我认为这可能与box-sizing属性有关，该属性对于锚点和按钮似乎有所不同，并且可能会导致对高度的理解有所不同-但由于没有填充和边距，因此不应有所作为，因此也不会更改偏移量，并且为类手动设置box-sizing属性也不会更改效果。
同样，我并不是在这里主要寻找修复程序，更不用说讨论对按钮和锚定样式进行样式设置是否是一个好主意了，但是我对这种CSS现象的扎实解释很感兴趣。它是带有样式按钮的浏览器怪癖吗？但是，为什么所有浏览器（Firefox，Chrome，IE）都显示出相同的效果？还是我忽略了明显的东西？
<!DOCTYPE html>
<html><head>
<style>
.btn {
margin: 0;
padding: 0;
overflow: hidden;
border: none;
outline: none;
background-color: grey;
color: white;
height: 2em;
width: 10em;
font-size: 20px;
font-family: sans-serif;
display: inline-block;
text-align: center;
}
</style>
</head><body>
<button type="submit" class="btn">
Button
</button><a href="#" class="btn">
Button
</a><button type="button" class="btn">
Button
</button><a href="#" class="btn">
Button
</a>
</body></html>
由于未设置样式的按钮看起来与未设置样式的锚点不同，因此，如果将相同的样式应用于这两个样式，将会有所不同。我认为唯一的解决方案是仅将不同的类应用于按钮和锚点。