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

【问题标题】：input css rendering inconsistencies across browsers跨浏览器的输入 css 渲染不一致
【发布时间】：2014-08-22 11:06:49
【问题描述】：

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

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

http://jsfiddle.net/XBjz3/

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

按原样显示

火狐12
铬 19
Internet Explorer 9

显示错误

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

奇怪的是，当其他 3 个 webkit 浏览器渲染不正确时，它在 Chrome 中显示正常。

【问题讨论】：

对我来说垂直位置似乎不一致，而不是高度。
我确实在输入按钮上说过负相对定位。

标签： css input webkit positioning

【解决方案1】：

而不是使用

top:-0.5em;

你可以使用

bottom : 0.4em;

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

【讨论】：

不能解决问题。在 Opera 和 Safari 中尝试过。

【解决方案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/

【讨论】：

它看起来和原来的不一样。在 Firefox 中，输入字段位于较高的位置，并且提交按钮与输入字段重叠。

【解决方案3】：

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

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

这里是对原始版本的更改。

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

经测试可在 Firefox、Chrome、IE、Safari、Opera 和 Android 原生浏览器上运行。

【讨论】：