如何对齐输入字段和提交按钮（IE，FFox，Chrome之间的差异）？

Question

我在使用CSS设置表单字段时遇到问题。正如您在下面看到的，我正在尝试获取输入字段，然后向右移动提交按钮。但是由于某种原因，我不能让它们在任何浏览器上正确对齐，也不能让它们至少在它们中看起来相同，最后当我缩放时一切都变坏了！

我试过“行高：正常！重要;”解决方案，但这似乎不起作用......

我做错了什么？

IE7（xp）

FFox（linux）

Chrome（linux）

CSS（subscribe_form没有）：

#form_box {
    position: relative;
    height: 35px;
    top: 7px;
    left: 20px; 
}

#subscribe_email {
    border: solid 1px #CCC;
    height: 24px;
    width: 250px;
    font-size: 15px;
    color: #999;
    padding-left: 5px;
}

#subscribe_submit {
    position: relative;
    border: solid 1px #CCC;
    height: 25px;
    width: 115px;
    color: white;
}

HTML：

        <div id="box2" class="tbox">
            <div id="form_box">
            <form id="subscribe_form" action="subscribe" method="post">
                Sign Up:
                <input class="tbox" id="subscribe_email" type="text" name="email" value="email address" />
                <input class="tbox" id="subscribe_submit" type="submit" value="Subscribe" />
            </form>
            </div>
        </div>

Answer 1

这适用于我在FF，IE8和Chrome上的XP

#subscribe_email {
    border: solid 1px #CCC;
    height: 21px;
    width: 250px;
    font-size: 15px;
    color: #999;
    padding-left: 5px;
    vertical-align: bottom
}

#subscribe_submit {
    border: solid 1px #CCC;
    height: 25px;
    width: 115px;
    color: white;
}

我删除了#form_box div上的CSS，设置了vertical-align：bottom并调整了文本框的高度。

Answer 2

你应该尝试将它们左移，这样他们就会自己定位。

Answer 3

在应用任何css之前

使所有边距和填充为零 默认情况下所有浏览器都作为自己的边距和填充 通过使其为零然后应用你的风格，它最终会影响