Question

我正在尝试创建一个文本字段，并且按钮看起来像是一个联合元素的一部分，因此它们看起来像这样（来自Chrome Linux的屏幕截图）：

Example in Chrome

但是在Firefox Linux中，按钮的高度是两个像素：

Example in Firefox

示例CSS：http://dabblet.com/gist/1603701

我已将两个元素的字体大小设置为16px，希望它们显示相同，行高为19px - 但在Firefox中按钮的高度为21px！设置显式高度可能导致垂直对齐在Firefox中变得不正确，除非我缩小字体（不确定为什么）。

显然你无法在Firefox中设置输入的行高（参见article和bug report），那么我怎样才能强制元素达到正确的高度呢？

有什么建议吗？

Answer 1

这是一个跨浏览器的解决方案：

<!doctype html>
<html lang="en">
    <head>
       <style>
            html, body{
                padding: 50px;
            }
            .inputWrapper{
                display:inline-block;
                font-size:16px;
                padding:0px;
                border:1px solid #000000;
                border-radius:6px;
                background-color:#ffffff;
            }
            .email{
                margin:0px;
                margin-left:1px;
                padding:5px;
                border-width:0px;
                border-radius: 6px 0px 0px 6px;
            }
            .submit{
                margin: -1px;
                margin-left: -5px;
                padding: 6px;
                border-width:0px;
                border-radius: 0px 6px 6px 0px;
                color:#ffffff;
                background-color:#D94E35;
            }
        </style>
    </head>
    <body>
        <div class="inputWrapper">
            <input class="email" type="email" value="" placeholder="email address"/>
            <input class="submit" type="submit" value="Subscribe" />
        </div>
    </body>
</html>

您可以在此处看到它：http://dabblet.com/gist/1604595

Answer 2

您的表格框上有两个不同的填充，非常容易修复。

从此＆gt;

更改您的CSS

input[type="submit"] {
margin: 0;
padding: 6px 15px; /* Padding set 1px to high, so your getting 2px total extra space */
border: none;
border-radius: 0 6px 6px 0;
font-size: 16px;
line-height: normal;
color: white;
background: #D94E35;
}

到此＆gt;

input[type="submit"] {
margin: 0;
padding: 5px 15px; /* Now you should have even paddings */
border: none;
border-radius: 0 6px 6px 0;
font-size: 16px;
line-height: normal;
color: white;
background: #D94E35;
}

等高文本框和按钮

2 个答案: