Question

输入按钮错误地高于输入字段。

我使用Firebug复制应用于3个元素的所有样式（包含p元素和2个子input元素）来复制问题。

http://jsfiddle.net/XBjz3/

我感觉这与我在输入按钮上使用负相对定位有关。

在

中显示

Firefox 12
Chrome 19
Internet Explorer 9

中显示错误

Android 2.3.5浏览器
iOS 5.1浏览器
Safari 5.1.7
Opera 11.6

奇怪的是，当其他3个webkit浏览器呈现错误时，它在Chrome中显示正常。

Answer 1

而不是使用

top:-0.5em;

您可以使用

bottom : 0.4em;

使用负值作为位置是不好的做法。

Answer 2

检查这个，我希望这会对你有帮助..

HTML

<p>
    <input type="password" class="pw-box" id="pwbox-33" name="post_password">
    <input type="submit" class="pw-submit" value="Submit" name="Submit">
</p>

<强> CSS

p {

    width:50%;
    display: inline;
    float: left;
    padding-left: 1%;
    padding-right: 1%;
    position: relative;
    font-size: 1em;
    line-height: 1.5em;
    margin:20px 0 0 20px;
    background:rgba(0,0,0,0.1);

}
#pwbox-33 {
    width: 200px;
    border:0;
    background: #606D80;
    border-top:solid 1px  #1F3453;
    color: #DCE0E6;
    margin: 0;
    padding: 0.5em;
    text-shadow: 0 1px 0 #1F1F20;
    vertical-align: top;
}
.pw-submit{
cursor: pointer;
    background:#2B4C7E;
    color: #DCE0E6;
    padding: 0.5em 1em;
    position: absolute;
    text-shadow: 0 -1px 0 #1F1F20;
    top: -0.3em;
    border:0;
    font-size:12px;
    font-family:arial;
    left:200px;
    border-bottom:solid 0.5em #0E2952;
    outline:0;

}

http://jsfiddle.net/YjNJ5/3/

Answer 3

找到一个与预期完全相同的解决方案。

http://jsfiddle.net/XBjz3/8/

以下是原始版本的更改。

#pwbox-33 {
    vertical-align: bottom;
}
.pw-submit {
    top: 0;
    vertical-align: bottom;
}

经过测试，适用于Firefox，Chrome，IE，Safari，Opera和Android股票浏览器。

输入css渲染浏览器的不一致性

3 个答案: