文字输入比提交大1px

Question

我在这里有一个表格： http : //capeanntunaclub.com/form/index.html

问题是，相对于“提交”按钮，电子邮件输入框在顶部和底部添加了1px边框。 两者均设置为30px高度，但输入字段显示为32px。

我怎样才能解决这个问题？ 我将此代码添加到输入字段中，但没有区别：

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */ 

任何帮助将不胜感激！ :)

Answer 1

CSS的box-sizing: border-box可能正是您想要的。 http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

注意：对于Firefox，仍有供应商前缀版本-moz-box-sizing

Answer 2

金枪鱼俱乐部...看起来很酷！

好像添加style="height:28px;" 为您解决问题：

<input class="required email" id="mce-EMAIL" type="email" name="EMAIL" placeholder="Enter your Email" value="" style="height: 28px;">

看起来您已经自动将一些填充添加到了输入中，因此，尽管该按钮的高度为30px，但输入为28px加上填充正确地对齐了。

Answer 3

就个人而言，我发现设置表单元素的高度会引起问题，让高度自动变化并导致填充混乱。

同时设置vertical-align：两个元素的基线，使每个元素的文本底边对齐。

http://jsfiddle.net/6ofxugv0/

HTML

<form>
    <input class="required email" id="mce-EMAIL" type="email" name="EMAIL" placeholder="Enter your Email" />         
    <input class="button" id="mc-embedded-subscribe" type="submit" name="subscribe" value="JOIN THE CLUB" />
</form>

form {
    text-align: center;
}

CSS

#mce-EMAIL {
    font-size: 14pt;
    width: 422px;
    color: #FFF;
    text-indent: 40%;
    background-color: #75AA9F;
    font-weight: bold;
    letter-spacing: 2px;
    border: 0;
    background: url(http://www.capeanntunaclub.com/form/images/catcbg2.png) repeat;
    background-color: ;
    display: inline-block;
    vertical-align: baseline;
    padding: 3px 0;
}

#mc-embedded-subscribe {
    width: 160px;
    background-color: #76A9A0;
    color: #FFF;
    border: 0;
    font-weight: bold;
    letter-spacing: 1.5px;
    display: inline-block;
    font-size: 14px;
    vertical-align: baseline;
    padding: 7px 0 4px;
}

::-webkit-input-placeholder {
   color: white;
}