等高文本框和按钮

我试图做一个文本框和一个按钮看起来像他们的联合元素的一部分，让他们看起来像这样（截图来自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），那么我还可以如何强制元素达到正确的高度？

有什么建议吗？

来源

2012-01-13 Steve

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

<!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

来源

2012-01-13 00:24:49 vdbuilder

看起来很有希望，我会做一些全面的测试今晚并接受它，如果一切顺利！ – Steve 2012-01-13 09:06:23

谢谢你让我知道dabblet！真棒工具！ – 2012-01-13 16:32:39

你有你的形式盒，很容易解决两个不同的补白。

从这个>

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; 
}

为了这个>

更改CSS

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; 
}

来源

2012-01-13 00:37:08

不是，提交按钮上的额外填充是为了说明缺少边界。 – Steve 2012-01-13 08:52:10

等高文本框和按钮

回答

相关问题