具有相同 CSS 样式但尺寸不同的 HTML 锚点和输入按钮答案

【问题标题】：HTML anchor and input buttons with same CSS style, but different dimensions具有相同 CSS 样式但尺寸不同的 HTML 锚点和输入按钮
【发布时间】：2013-02-27 12:36:46
【问题描述】：

所以我有一个基本的按钮类，可以将相同的样式应用于网站上的各种按钮。

我不得不把一个表单输入和一个锚标签放在一起，它们的高度和宽度是不同的。我在每个按钮上都设置了相同的内部按钮文本，只是为了显示类似的差异（显然我不需要两个相邻的“添加”按钮：P）

我不想在 CSS 中指定宽度或高度，因为内容会改变。甚至字体看起来大小也略有不同，从盒子模型来看，填充看起来还不错。

http://jsfiddle.net/aeD4Z/2/

标记

<form id="" method="POST" action="">
<input class="button" type="submit" name="submit" value="Add">
</form>

<a class="button" href="">Add</a>

CSS

.button {
    font-family: Arial;
    background: linear-gradient(to bottom, #FCB97E 0%, #F07605 100%) repeat scroll 0 0 transparent;
    border: 1px solid #F07605;
    border-radius: 0.5em 0.5em 0.5em 0.5em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    line-height: 13px;
    outline: medium none;
    padding: 5px 8px !important;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    vertical-align: baseline;
}

编辑： 正如您在下面看到的，它不是填充，因为 firebug 中的框模型显示填充对于每个模型都是相同的，所以它是要做的事情与实际元素本身

如何在上面的 js fiddle 中的单个 CSS 类中使两者的尺寸相同？

【问题讨论】：

当您使用 Firebug 或类似的东西检查元素时，您还将获得浏览器在元素上设置的默认样式。也许你会发现那里的不同。
这是在什么浏览器中发生的？除了不同的边距外，我没有看到 Chrome 中的问题。
chrome 和 FF 都显示出高度差异，尽管 FF 差异更大
你试过box-sizing: border-box;吗？我意识到这是很久以前提出的问题，但它通常可以解决尽管样式相同但尺寸不同的问题。
对我来说，box-sizing 不是问题所在。 UA 样式表将input, textarea, keygen, select, button 的line-height 设置为normal，而重置样式表在几个元素（包括a 但不包括button）上设置font 为inherit； font 有 line-height 的简写。然后将line-height: 1 设置为body。因此，我的button 有一个line-height: normal，而我的a 有一个line-height: 16px。检查看起来与图片相似：相同的填充和边框，但内容“不知何故”更大。

标签： html css button

【解决方案1】：

要完全均衡“按钮式”<a> 锚点、input 和最近的button，同步它们的盒子大小是个好主意：

input 和 button 由于历史原因仍处于怪异模式（分别已处于现代模式 box-sizing: border-box）其余处于 box-sizing: content-box 模式...（无论哪种方式：必须置于相同的模式或通过区分填充来补偿相等的高度）

这是我开始为网站设计样式时的标准“测试”：

__AA__
<button id='button'>plain Button</button>
<a class='button' href='#'>plain Anchor</a>
<a class='button'>linkless Anchor</a>
<input class='button' type='submit' value='Input Button' />
__BB__

这个 CSS（stylus 表示法）是一个很好的样板：

button, a.button, input.button
    display inline-block
    font-size 12px
    font-weight bold

    color white
    font-family sans-serif
    text-decoration none
    background #24B345
    cursor pointer // also linkless (i.e. js) anchors/buttons should have that

    // important to equalize input/button vs. anchor:
    box-sizing content-box
    border 4px solid green
    padding 8px 10px
    margin 5px 4px 10px 0

    // some of this is default, 
    // but since input often gets styled elsewhere...
    vertical-align middle // a bit subject to taste 
    min-height 0 

    &:hover, &:focus // slight hover effect, resp. keyboard use (:focus)
         background: #44D365

Live on Codefork

【讨论】：

【解决方案2】：

填充对按钮和锚点的应用不同。我不知道这是事实，但我的猜测是按钮在其值周围保留了更多空间，看起来更像是一个链接呈现为文本的按钮。

你可以试试这个：

a {
   padding-top:5px !important;
   padding-bottom:5px !important;
   padding-left:0px !important;
   padding-right:0px !important;
}

这不会是完全相同的大小，但非常接近。

【讨论】：

如最初在帖子中所述，我不认为它是填充。我的更新中显示的盒子模型显示了这一点（紫色），因为蓝色部分似乎比输入所需的要大
我仍然认为它归结为尝试将文本样式设置为看起来像一个按钮，它具有一定的开销。快速简便的方法是将按钮样式的按钮放在锚点内，而不像按钮一样设置锚点的样式...jsfiddle.net/aeD4Z/3但这可能不是您想要的。
插话说我遇到了同样的问题。两者的填充相同（已验证，可以看到），但锚点的高度可能是输入的两倍。好奇怪！

【解决方案3】：

好吧，我总是在按钮类中添加 line-height 属性，如下所示：

/* HTML */
<a href="" class="button"> Go somewhere </a>

<button class="button"> Click here </button>

<input type="submit" class="button" value="Submit">

/* CSS */
.button {
    box-sizing: border-box;
    display: inline-block;
    cursor: pointer;
    line-height: inherit;   // this property does magic
   // rest of the styling
}

这总是对我有用.. ?

【讨论】：