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

Question

这是 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 类重置填充、边距和边框，但它仍然不起作用。

Answer 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;

除此之外，实际上还有更多。此外，不同的浏览器具有不同的默认值。