按钮和链接样式的行为不同

Question

我有两个元素(<a>和<button>(，它们都与Tachyons共享相同的类：

<a class="f4 br2 fw9 pa3 bg-dark-blue white link db tc lh-solid fixed left-1 bottom-1 right-1 mla mra z-1  " href="/edit-profile/photos"
>Confirm account</a>
<button class="f4 br2 fw9 pa3 bg-dark-blue white link db tc lh-solid fixed left-1 bottom-1 right-1 mla mra z-1  " type="submit">Next</button>

预期的行为是它们都是相同的宽度，但它们是不同的(尽管样式相同(。

知道这里发生了什么吗？

这是演示该问题的代码笔。

Answer 1

在您的特定情况下，按钮具有边框和不同的字体，这是浏览器的默认样式。每个浏览器对每种类型的元素都有自己的默认值，这就是为什么按钮和链接看起来就像它们没有任何样式一样的原因。事实上，说"没有任何样式"是不对的，而是"没有任何额外的样式"：

<button>I'm a button</button>
<a href="">I'm a link</a>

我没有遍历你拥有的所有 css，因为你有一个元素有 17 个类，我懒得了，但实际上可以用一个共同的类为不同的元素有不同的风格：

.awesome {
  display: inline-block;
  border: 5px solid;
  width: 200px;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  margin: 10px 0 10px 10px;
  font-family: Arial, serif;
}
div.awesome {
  background-color: deepskyblue;
  border-color: royalblue;
  font-style: italic;
  color: darkslateblue;
}
span.awesome {
  background-color: orangered;
  border-color: firebrick;
  font-weight: bold;
  color: gold;
}

<div class="awesome">I'm a div</div>
<span class="awesome">I'm a span</span>