2

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

在某些浏览器中，它看起来不错，但在某些浏览器中，它们在垂直方向上相差一两个像素。这是一个 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>
4

3 回答 3

11

一个简单的解决方法是修改以下 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;
}
于 2013-10-06T00:09:48.027 回答
1

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

height: 46px;

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

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

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

显示表格单元格不一致。

于 2013-10-05T23:10:07.167 回答
0

问题是您为文本框提供的填充。在某些浏览器上，填充仅对输入类型 = 按钮或提交有水平影响。

// 使固定

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

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

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

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

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

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

于 2013-10-05T23:14:54.533 回答