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＆＃39; 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：baseline，它使每个元素的文本的下边缘对齐。

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

文本输入比提交大1px

3 个答案: