相同的CSS规则在按钮和标记上的工作方式不同

Question

这是我的HTML -

.btn {
  display: inline-block;
  border: none;
  height: 45px;
  padding: 0;
  margin-top: 5px;
  margin-bottom: 5px;
}
.cta {
  background-color: #F07444;
  color: white;
  transition: .2s ease;
  font-family: 'Roboto', 'Helvetica', 'Arial', 'Sans Serif';
  text-decoration: none;
  outline: none;
}
.cta:active {
  background-color: transparent;
  transition: .2s ease;
  border: 1px solid #F07444;
  color: #F07444;
  outline: none;
}

<div class="container">
  <div class="row">
    <button class="btn cta">Abc</button>
    <a class="btn cta" href="abc.com">Abc</a>
    <button class="btn cta">Xyz</button>
  </div>
</div>

以下是它的内容 -

我在这里做错了什么？

Answer 1

有2个属性可以解决这个问题：为vertical-align: middle设置line-height和.cta。看起来浏览器即使没有在检查器中显示它也会设置它。

http://codepen.io/themeler/pen/WRaLzy

.cta {
  background-color: #F07444;
  color: white;
  transition: .2s ease;
  font-family: 'Roboto', 'Helvetica', 'Arial', 'Sans Serif';
  line-height: 45px;
  vertical-align: middle;
  text-decoration: none;
  outline: none;
}

好的做法是在样式表中使用CSS重置（在其他样式之前）。

更新： 相同的字体大小，并删除了不必要的按钮高度。

UPDATE2： 该死的Mozilla家伙正在隐藏的样式表中添加边框和填充：

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

Answer 2

你没有做错任何事，只是浏览器有一些自己的默认样式，包括按钮。它被称为“用户代理样式表”，如果您没有将属性设置为覆盖用户代理样式，那么它们就会存在。

右键单击按钮，然后单击“检查元素”。查看“样式”选项卡以查看用户代理添加自己样式的位置。

Answer 3

对链接标记和按钮标记应用了不同的属性（在检查元素时看不到其中一些属性）。

相反，您应该将链接包裹在按钮周围。

<div class="container">
<div class="row">
<button class="btn cta">Abc</button>
<a href="abc.com"><button class="btn cta" href="abc.com">Abc</button></a>
<button class="btn cta">Xyz</button>
</div>
</div>

这是一个有效的JSFiddle向您展示：https://jsfiddle.net/nhu6to66/