css - 使按钮和文本框彼此相邻的高度相同

Question

我正在尝试覆盖两个表单元素的默认表单样式，以便文本框和按钮高度相同并且并排放置，看起来它们是一个元素。

在某些浏览器中，它看起来不错，但在某些浏览器中，它们在垂直方向上相差一两个像素。这是一个jsfiddle演示。 OS X 上的 Opera 和 Firefox 给我带来了问题。

http://jsfiddle.net/QS3ec/6/

*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
input[type="text"] {
    background-color: #fafafa;
    padding: 7px;
    font-family: helvetica, arial, sans-serif;
    font-size: 1.2em;
    margin-bottom: 20px;
    display: block;
    border: solid 2px #bbb;
    color: #6f6f6f;
}
input[type="submit"] {
    background-color: #fafafa;
    font-family: helvetica, arial, sans-serif;
    font-size: 1.0em;
    font-weight:bold;
    padding: 7px;
    color: #6f6f6f;
}
input[type="submit"]:hover {
    background-color: #ff379f;  
    color: #fafafa;
}
#subscription-email-text-field {
    display:inline-block; 
    font-size:0.9em; 
    font-weight:400; 
    border:0; 
    width:250px;
    height:32px;
    margin:0;
}
#subscribe-button {
    display:inline-block;
    border-width:0px 0px 0px 1px;
    margin:0;
    height:32px;
}

<div style="background-color:black; padding:20px;">
    <form>
        <input type="text" id="subscription-email-text-field" name="email" placeholder="Enter Email for Newsletter"><!--
   --><input type="submit" id="subscribe-button" value="subscribe">
    </form>
</div>

Answer 1

一个简单的解决方法是修改以下 CSS 规则:

#subscription-email-text-field {
    vertical-align: top;
    display:inline-block; 
    font-size:0.9em; 
    font-weight:400; 
    border:0; 
    width:250px;
    height:32px;
    margin:0;
}

添加 vertical-align: top 负责基线对齐。

参见演示:http://jsfiddle.net/audetwebdesign/EmAnr/

脚注:

要在按钮元素上添加左边框，记得添加边框样式，可以按如下方式完成:

#subscribe-button {
    display:inline-block;
    border: 1px solid black;
    border-width:0px 0px 0px 1px;
    margin:0;
    height:32px;
}