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

【问题标题】：Button and link styles behaving differently行为不同的按钮和链接样式
【发布时间】：2018-08-13 19:40:04
【问题描述】：

我有两个元素（<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>

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

知道这里发生了什么吗？

Here's a Codepen demonstrating the issue.

【问题讨论】：

浏览器对<button> 和<a> 有不同的默认样式。给按钮min-width: 100%，它就会展开。
嗨@sol 添加min-width: 100% 不幸的是不会使它们的宽度相同
你能改变标记还是只改变样式？
确实如此。默认情况下，button 上还有一个边框。 codepen.io/anon/pen/VQJWBa（位置：固定移除，以便您可以看到它们）
是的，你是对的@sol。使它们的行为相同，这是所需的行为。谢谢

标签： css button hyperlink styles anchor

【解决方案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>

【讨论】：