Question

所以我使用以下CSS创建按钮样式;

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    font-weight:bold;

    text-shadow: 0 1px 1px rgba(0,0,0,.3);

    padding: .5em 2em .55em;

    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);

    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .5em;
}

结合其他一些类来添加颜色并给予悬停和按压效果效果很好。

我已将此样式应用于整个网站的各种html标记;

<span>
<a href>
<button>
<input type="button">
<input type="submit">

所有这些都很棒，在Chrome和（令人惊讶的）IE7-9中都很棒（在IE7-8中不那么好但是没问题。）

但在Firefox中，input类型标签的大小几乎是a href类型标签的两倍。是什么造成的？

这是an example。

Answer 1

使用em可能会导致此行为......

Answer 2

添加line-height属性。

类似的东西：

line-height:20px;

应该这样做。

Firefox对不同的元素使用不同的行高。如果您使用firebug进行核对，则a的{{1}}为14px，而line-height的{{1}}为17px。

Answer 3

好吧，我使用了Pablo Rincon，ThomasK和beanland的所有三个建议的组合。他们没有一个孤立地帮助，但他们似乎一起工作！

添加了CSS重置，并非所有这些都有效但发现了这一点; http://github.com/necolas/normalize.css

将em更改为px。

将.button的行高设置为17px。

完美。欢呼声。

CSS样式＆＃39;输入＆＃39;不同大小的＆＃39; a href＆＃39;在Firefox？

3 个答案: