我在页面上有一个输入样式，有一些基本的填充和字体大小，我试图将相同的样式应用于链接，但由于某种原因，无论我做什么，链接总是比按钮大（高度），即使有完全相同的文本和字体大小，我试着做display: block，但这只是使按钮的屏幕宽度。
下面是CSS：
.button{
padding: 10px 15px 7px 15px!important;
font-size: 16px !important;
color: white;
cursor: pointer;
border-radius: 2px;
text-decoration: none;
}
.button-3{
background-color: #ff4d4d;
border: 1px solid #ff4d4d !important;
}我已经看了Chrome的样式面板，并确认字体/填充正在使用（它不是strikken通过）。
它看起来是这样的：
4条答案
按热度按时间bnl4lu3b1#
看起来这个问题是因为：
line-height必须相同。请确保您为两者给予了一致的
line-height。现在，请在两者中设置：这应该可以修复它。此外，您可以将两种样式与计算的样式进行比较，以检查是否有其他设置。因为您说
<button>，它可能也有一些border。此外，就像我猜的那样，你也给了
border和相同的颜色作为按钮的背景，使它看起来2px更大。打开开发者工具时，尝试比较计算样式部分：
vjrehmav2#
为了避免这种情况，我总是设置我使用的字体系列。
看看这个例子：https://fiddle.jshell.net/tnr0jxka/
您还可以考虑添加：-webkit-apperance：none;- moz外观：无;对于这种css，它将为您节省大量的跨浏览器体验时间。
hec6srdp3#
按钮不会自动继承全局样式。因此，显式设置按钮的字体大小将解决这个问题
有关详细信息，请参阅此解决方案
gmxoilav4#
我来到这里与同样的问题，我已经设置了我所有的行高和其他东西，告诉，没有帮助。然而，我发现他们是不同的显示属性，所以设置两者（显示：'inline-block'）解决了这个问题。