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

Question

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

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

http://jsfiddle.net/XBjz3/

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

按原样显示

• 火狐 12
• 铬 19
• 互联网浏览器 9

显示错误

• 安卓2.3.5浏览器
• iOS 5.1 浏览器
• Safari 5.1.7
• 歌剧 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 库存浏览器上运行。