Question

我试图覆盖两个表单元素的默认表单样式，以便文本框和按钮都是相同的高度并排并排，这样它们看起来就像是一个元素。

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

*, *: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;
}

Answer 2

我所做的就是增加提交框的高度：

height: 46px;

http://jsfiddle.net/QS3ec/9/

这真的很难。我在Mountain Lion上测试了Safari，Firefox，Opera和Chrome，所以这可能不是正确的解决方案。

我认为问题在于输入是由浏览器使用非CSS机制呈现的替换元素，因此样式可能不会像您期望的那样应用。我过去也有过类似的问题，可以解释这类事情。尝试设置旧的UI组件，按钮，输入等时，似乎总会出现奇怪的行为。

Display Table Cell inconsistency.

Answer 3

问题是您给文本框填充的内容。一定的浏览器填充只对输入类型=按钮或提交具有水平效果。

//修复

将'box-sizing：content-box'规则添加到输入[type ='submit'] {}闭包。

这将在某些浏览器上执行，因为只有少数人实现了它。

作为解决方法，将提交按钮的高度设置为

        "height of text-box + ( 2 * padding given to text-box')

为了解释缺少的垂直填充。这是实现目标的最佳方式（跨浏览器）。

例如：文本框的高度= 32px。所以按钮的高度= 32 + 2 * 7 = 46px

使按钮和文本框的高度相同

3 个答案: