我的页面上有一个输入样式，有一些基本的填充和字体大小，我尝试将相同的样式应用于链接，但出于某种原因，无论我做什么，链接总是比按钮大(高度)做，即使使用完全相同的文本和字体大小，我尝试执行 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 样式面板并确认正在使用字体/填充(它没有被删除)。
这是它的样子:
最佳答案
看起来问题是因为:
- 您没有使用 CSS 重置。
line-height必须相同。
确保您提供一致的 line-height二者皆是。现在，在两者中设置:
line-height: 1.5;
这应该可以解决它。此外，您可以将两种样式与计算出的样式进行比较，以检查是否设置了其他任何内容。既然你说 <button> , 它也可能有一些 border .
此外，正如我猜想的那样，您还提供了 border和按钮的背景颜色相同，使它看起来2px更大。
当您打开开发者工具时，尝试比较计算样式部分:
关于CSS - 文本链接大于按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40854704/