Question

我的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;

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

Answer 2

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

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

2 个答案: