Firefox 和 Chrome 中的输入高度差异

Posted 2023-03-05

【中文标题】Firefox 和 Chrome 中的输入高度差异

【英文标题】：input height differences in Firefox and Chrome

【发布时间】：2011-11-05 23:20:05

【问题描述】：

为什么 Chrome 的输入高度比 Firefox 大

在此处查看示例http://jsfiddle.net/jitendravyas/89Msh/1/

select, input, textarea, button 
    font: 99% sans-serif;


input, select 
    vertical-align: middle;


body, select, input, textarea 
    color: #444444;


button, input, select, textarea 
    margin: 0;



input, textarea 
    font-family: inherit;

    line-height: 1.5;



input 
    border: 0 none;
    font-size: 32px;
    line-height: 1.1;
    margin-right: 29px;
    padding: 3px 3px 0;
    width: 206px;
    border-radius: 7px;

【问题讨论】：

尝试重置输入的css属性，我的意思是重置边距，填充为0。试试这个，我不确定

【参考方案1】：

只需尝试溢出：输入隐藏

【参考方案2】：

我在 Firefox 、 Chrome 和 Opera 浏览器中遇到了相同的输入行高问题。所以我结合了 line-height 、 height 和 font-size 以获得合适的外观。

input                    
        line-height: 45px;
        height: 45px;
        font-size: 45px;
      

【参考方案3】：

我遇到了同样的问题，必须将 line-height 和 padding 结合起来才能正常工作。

【参考方案4】：

这应该适用于 Chrome 和 Firefox 中的选定元素：

height: 20px;
padding: 0;

【参考方案5】：

问题本质上是line-height。

Chrome 看到 line-height 就像看到 height 而 Firefox 没有。

向输入添加高度应该可以解决问题，但您应该注意 line-height 和 height 匹配。

例如：height: 20px; line-height: 20px;。

http://jsfiddle.net/e2agj/1/ - 最后一个示例输入是正确的。

【讨论】：

感谢您的解释。我添加了高度和行高。它解决了问题

【参考方案6】：

我通常使用padding而不是height来推送输入的总高度。这样做，我不必为 Chrome 和 Firefox 的不同解释而争论不休。

【参考方案7】：

我认为这与您为font 设置input 的样式有关。

select, input, textarea, button 
    font: 99% sans-serif;

每个浏览器都有自己的 sans-serif 渲染，因为那真的不是字体。

因此，如果没有特定的字体集，您可能会遇到一些不一致的情况。

【讨论】：

我认为这不是因为这里的大小相同jsfiddle.net/jitendravyas/4wfvD/1