Firefox/Opera 中的按钮填充问题答案

【问题标题】：Button padding problems in firefox/operaFirefox/Opera 中的按钮填充问题
【发布时间】：2012-02-28 04:27:10
【问题描述】：

我的 HTML 按钮有问题。当我在 Opera 中放置按钮时，它位于中心（垂直），但在 Firefox 中，按钮文本看起来比 Opera 的稍低，这破坏了我的网站设计。

这里是html代码：

<input type="submit" value="Log In" id="button-log" />

这是css代码：

#button-log {
width:70px;
height:30px;
background-color:#1963FF;
}

这里没什么不寻常的吧？

但我真的不知道为什么登录文本出现在 Firefox 中，而在 Opera 中却没有。

如果有人帮忙，我真的很感激。

【问题讨论】：

Firefox 和 Opera 有哪些版本？除了 Opera 中按钮周围的黑色边框外，我没有看到任何区别......
经典头痛。检查这个问题：stackoverflow.com/questions/1679952/…
你在使用css重置吗？我建议您查看necolas.github.com/normalize.css。它有助于输入类型，使它们在浏览器中更加一致。

标签： html css

【解决方案1】：

试试这个..

#button-log {
    width:70px;
    height:30px;
    padding:3px 0;
    background-color:#1963FF;
}

【讨论】：

【解决方案2】：

在按钮 CSS 中添加 line-height

#button-log {
    line-height:24px; // or you can adjust accord to your need
    width:70px;
    height:30px;
    padding:3px 0;
    background-color:#1963FF;
}

【讨论】：