按钮小于Chrome中的文字输入？

Question

我尝试将提交按钮（输入类型=＆＃34;提交＆＃34;）与文本输入（输入类型=＆＃34;文字＆＃34;）对齐，但在Chrome中提交按钮总是略小一点。

这是HTML：

<input type="email" placeholder="Secret Sale &hearts; Enter your email" name="MERGE0" class="email" size="22" value="">
<input type="submit" class="button" name="submit" value="Join">

这就是CSS：

#header-top .newsletter .email, #header-top .newsletter .button { font-size: 12px; line-height: normal; box-sizing: border-box; padding: 5px; }

正如您所看到的，我已经尝试将padding和line-height设置为对于这两个元素都相同，并且在阅读Stackoverflow之后我已经看到了设置box-sizing，遗憾的是，它没有任何区别。

这是IE（罚款）：

在Firefox中（也没关系）：

最后在Chrome中（按钮太小，或文字输入太大？）：

如果现场网站也有帮助，请点击这里：http://www.arabel.co.uk/about-arabel/faqs

对此有任何帮助将非常感激，我完全不知道为什么它在Chrome中更大。谢谢！

Answer 1

可能与浏览器默认样式无关。

您可以尝试在页面中包含reset.css。 http://meyerweb.com/eric/tools/css/reset/

尽管如此，它可能会产生无人看管的影响。

Answer 2

由于某种原因，Chrome正在为您的文本框添加默认的2px边框。您的文本框和按钮都具有相同的填充，但文本框具有2px边框，按钮具有1px边框。快速解决方法是将“5px”的单个填充添加到“.email”..一切看起来都没问题。如果你在普通的css行中改变它，那么这两个项都将得到填充，它们仍然会有倾斜。

#header-top .newsletter .email{
padding: 4px;
}

并确保在为.email和.button定义css的行之后添加此项，以便这将覆盖5px填充。

或者，您也可以完全取消组合的CSS并为.email添加单独填充或4px，为.button添加5px