如何在Firefox中正确渲染文本字段旁边的按钮？答案

【问题标题】：How to get correct rendering of button next to text field in firefox?如何在Firefox中正确渲染文本字段旁边的按钮？
【发布时间】：2010-11-24 13:30:28
【问题描述】：

<html>
    <head>
        <style type="text/css">
            #theInput
            {
                border:solid 1px gray;
                height:20px;
            }
            #theButton
            {   
                border:solid 1px gray;
                height:20px;
            }

        </style>
    </head>
    <body>
        <input type="text" id="theInput"><input type="button" value=" Go " id="theButton">
    <body>
</html>

在 Firefox 中渲染上一个时，按钮比文本字段高约 1 像素。如何解决这个问题？ 在没有指定文档类型的情况下，高度在 chrome 中是完美的，甚至在 IE6 中也是完美的，但在 Firefox 中却不是？

【问题讨论】：

标签： html css firefox

【解决方案1】：

如果您使用最近的 DOCTYPE，例如 HTML 4.01 或 XHTML 1.0 或 1.1，那么在 FF、Chrome 和 IE 8 中始终如一，按钮实际上比文本框短 2 个像素。在 FF 中，Firebug 实际上报告该框为 18px。所以我建议使用符合标准的 DOCTYPE，并将按钮的样式设置为比文本框高 2px：

http://jsfiddle.net/DPbsA/8/

这是一个左侧有一个橙色框，高度 = 20px，边框 = 上下 1px，使框的总“视觉高度”为 22px：

http://jsfiddle.net/DPbsA/12/

您可能希望使用符合标准的 DOCTYPE，因为没有它们，FF/Chrome 和 IE 之间的盒子模型可能会大不相同。

【讨论】：

尽管在现代 DocType 的上下文中听起来很奇怪：将按钮的样式设置为比文本框高 2px 以使它们同样高，但这是正确的答案。投票赞成。

【解决方案2】：

拥有标准的 doctype 总是好的，因为如果您不指定 doctype，IE 会退回到 quirks 模式。

添加 padding-bottom ，它将与文本框对齐

如果您还需要什么，请告诉我

    #theButton
                {   
                    border:solid 1px gray;
                    height:20px;
                    padding-bottom:2px;


}

【讨论】：