html - <button> 和 <a> 似乎有不同的行高,如何绕过它?

标签 html css

该按钮比具有相同样式的 a 标签大 2px。有什么想法为什么要这样做以及如何解决吗?

jsfiddle

<a href="">Some Text</a>
<button> Some Text</button>

a, button {
  background-color: red;
  border: none;
  text-decoration: none;
  font-size: 14px;
  line-height: 14px;
  font-family: Verdana;
  display: inline-block;
  color:black;
  padding:0;
}

最佳答案

按钮有填充。 在按钮上设置 padding : 0;,它们看起来是一样的

Firefox 有它自己的东西...... 尝试添加以下内容:

button::-moz-focus-inner { 
    border: 0;
    padding: 0;
}

关于html - <button> 和 <a> 似乎有不同的行高,如何绕过它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14391185/

相关文章:

html - Outlook 2010 与 Outlook 2013 的电子邮件 html 模板

jquery - 检查几个高度并隐藏高元素容器父元素

html - CSS 图像幻灯片不适合屏幕尺寸

html - 带有 id 和外部 css 样式表的表将无法工作或格式化

jquery - 延迟加载 gif 图片

css - 使标题和侧面 div 在居中滚动时保持不变

javascript - 使用javascript隐藏特定UL中的href元素

javascript - CSS 更改不会反射(reflect)在 Polymer 中

javascript - 在 JavaScript 元素之上覆盖 div

html - 分配 line-height 以跨越 html 中的元素 buggy ?