代码之家 › 专栏 › 技术社区 › Babiker

如何在firefox中获得文本字段旁边按钮的正确呈现?

firefox css html

Babiker · 技术社区 · 14 年前

<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中呈现前一个按钮时,该按钮比文本字段高约1px。怎么解决这个问题? 在没有指定doctype的情况下,高度在chrome和IE6中都是完美的,但在Firefox中却没有?

2 回复 | 直到 14 年前

nonopolarity 14 年前

如果使用最新的DOCTYPE,如HTML 4.01或XHTML 1.0或1.1,然后一直使用FF、Chrome和IE 8,则按钮实际上比文本框短2像素。在FF中,Firebug实际上报告这个盒子是18px。因此,我建议使用标准兼容的DOCTYPE,并设置比文本框高2倍的按钮样式:

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

这是一个左边有一个橙色的盒子,高度=20px,上下边框=1px,使盒子的总“视觉高度”为22px:

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

您可能希望使用标准兼容的DOCTYPE,因为没有它们,FF/Chrome和IE之间的box模型可能会非常不同。

kobe 14 年前

拥有标准的doctype总是很好的,因为如果你不指定doctype,IE就会回到quirks模式。

添加填充底部,它将与文本框对齐

如果你还需要什么,请告诉我

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


}

推荐文章

Softly · 单选按钮未按预期取值

1 年前