CSS - 大于按钮的文本链接

Question

我的页面上有一个输入样式，有一些基本的填充和字体大小，我尝试将相同的样式应用于链接，但由于某种原因，链接总是比按钮更大（高度），无论我是什么即使使用完全相同的文本和字体大小，我也尝试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样式面板并确认正在使用字体/填充（它没有被打破）。

这是它的样子：

Answer 1

看起来问题是因为：

• 您没有使用CSS重置。
• line-height必须相同。

确保为两者提供一致的line-height。现在，在两者中设置：

line-height: 1.5;

这应该解决它。此外，您可以将两种样式与计算样式进行比较，以检查是否还有其他设置。由于您说<button>，它可能还有一些border。

另外，就像我猜测的那样，你也给了border和背景颜色相同的按钮，使它看起来更2px。

当您打开开发者工具时，请尝试比较计算样式部分：

Answer 2

为了避免这种情况，我总是设置我使用的字体系列。

看一下这个例子：https://fiddle.jshell.net/tnr0jxka/

您还可以考虑添加：-webkit-apperance：none; -moz-apperance：none;对于这种css，它将为您节省大量的跨浏览器体验。