为什么使用相同 CSS 样式的超链接和按钮看起来不同？答案

【问题标题】：Why does a hyperlink and a button styled with the same CSS look different?为什么使用相同 CSS 样式的超链接和按钮看起来不同？
【发布时间】：2013-12-25 05:26:16
【问题描述】：

这里是JSFiddle

我的 HTML：

<a href="register" class="btn btn-splash-action">Register</a><br>
<input name="SignIn" type="submit" class="btn btn-splash-action" value="Sign In" alt="Sign In" />

我的 CSS：

.btn {
    display: inline-block;
    font-family:Arial, Helvetica, sans-serif;
    text-align:center;
    text-decoration: none;
}
.btn-splash-action {
    background: #09F;
    border: 1px solid #0b0e07;
    color: #ffffff;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 120%;
    text-decoration: none;
    padding-bottom: 5px;
}

基本上，我有一个超链接，其中应用了 CSS 类作为按钮元素。然而，它们在视觉上具有不同的宽度，并且 Firebug 计算的宽度也不同。

我在 IE10 和 FireFox 26 中遇到了同样的问题。

如果我对两个元素应用相同的样式，为什么它们看起来不同？

编辑： 将 JSFiddle 更新为 http://jsfiddle.net/DnaDG/1/

尝试使用.btn 类重置填充、边距和边框，但仍然不起作用。

【问题讨论】：

标签： html css

【解决方案1】：

在这两种情况下，浏览器都会从相应元素的默认样式开始，然后将您的样式添加到这些样式中。 <a> 标记和<input> 标记具有不同的默认（起始）样式。

以下是 Safari 用于 <a> 元素的默认样式：

color: -webkit-link;
text-decoration: underline;
cursor: auto;

以下是<input> 元素的一些默认样式：

-webkit-align-items: flex-start;
text-align: center;
cursor: default;
color: buttontext;
padding-top: 2px;
padding-right: 6px;
padding-bottom: 3px;
padding-left: 6px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: outset;
border-right-style: outset;
border-bottom-style: outset;
border-left-style: outset;
border-top-color: buttonface;
border-right-color: buttonface;
border-bottom-color: buttonface;
border-left-color: buttonface;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
background-color: buttonface;
box-sizing: border-box;

除了这些之外，实际上还有更多。另外，不同的浏览器有不同的默认值。

【讨论】：

那么在将我自己的样式应用于所有浏览器之前，如何完全重置按钮和锚点样式？
添加您自己的样式规则以替换浏览器默认值
你能看看我更新的 JSFiddle。我尝试使用 .btn 类重置样式，但没有任何效果。
作为建议，您可能会受益于熟悉您最喜欢的 Web 浏览器的开发工具。（现在所有现代浏览器都有一个相当不错的。）您可以简单地检查有问题的元素并通过简单的鼠标单击来启用/禁用规则。与评论讨论相比，这是解决问题的更快（和更简单）的方法。
尝试使用 Firebug 查看发生了什么，但我无法理解。另外，如果我在 Firefox 上修复它，那么它在 IE 中可能看起来仍然不同。我刚刚决定放弃尝试将超链接设置为按钮的样式，并将其替换为实际的按钮元素。完成。

【解决方案2】：

每个元素的默认样式都不同...例如，超链接没有边框，并且有些样式您没有覆盖，因此元素保留了这些样式。因此，并非您的 CSS 中的所有样式都会产生效果。那有意义吗？希望这会有所帮助！

【讨论】：