1

所以我使用下面的 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。这是什么原因造成的？

这是一个例子。

4

3 回答 3

3

使用 ofem可能会导致这种行为......

于 2012-07-04T18:04:30.637 回答
2

添加一个line-height属性。

就像是：

line-height:20px;

应该这样做。

Firefox 对不同的元素使用不同的行高。如果你用萤火虫检查，a有一个line-height14px 的，而inputs有一个line-height17px 的。

于 2012-07-04T18:47:17.077 回答
0

好吧，我结合了 Pablo Rincon、ThomasK 和 beanland 的所有三个建议。他们都没有孤立地帮助，但他们似乎都在工作！

添加了一个 CSS 重置，并非所有这些都有效，但找到了这个；http://github.com/necolas/normalize.css

将 em 更改为 px。

将 .button 上的 line-height 设置为 17px。

完美的。干杯。

于 2012-07-05T09:05:08.883 回答