css - Chrome 中的输入按钮位置已关闭？

Question

当我在 Firefox 中打开页面时，此电子邮件订阅表单的输入按钮与输入字段正确对齐，但在 Chrome 中看起来有点不对劲。

有人能帮我弄清楚如何让它在 Chrome 中正确排列吗？非常感谢!

html代码:

<div id="socialmedia">

    <form action="********/account.php" name="digiSHOP" method="post">

        <input type="hidden" name="m" value="subscribe" />

        <input type="hidden" name="submit" value="true" />

        <input type="hidden" name="secret" value="a6887a2c4d7909f10a4e01778cdd4b02" />

        <input type="hidden" name="mailingListId" value="1" />

        <div class="form-label" >
            <div class="nicelabel" >
                <img border="0" src="updateme.gif" width="132" height="30"></a>
            </div>
            <div class="niceform" >
                <input align="left" type="text" value=" your email" name="email" style="width:150px; height:24px; maxlength="80" value="" size="20" />
                <input class="edit-button" type="submit" value="" />
            </div>
        </div>
    </form>
</div>

CSS 样式:

#socialmedia{
    float: left;
    width: 350px;
    height: auto;
    margin-top: 15px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 0px;
    text-align: left;
}

.form-label {
    float: left;
    width: 400px; height: 28px;
    font-size: 1.5em;
    margin: 10px 0 0 0;
    text-align: left;
}

.nicelabel { float: left; text-align:left; width:132px; }

.niceform { float: left; text-align:right; width:230px; }

input, textarea {margin-left: 0px; }

截图:

Answer 1

像这样的不一致存在于不同的浏览器中。有两种方法可以解决此问题:

使用绝对定位

HTML

<form class="contact-form">
    email id <input type="text"/><input type="submit" value="submit" />
</form>

CSS

form.contact-form{
    position:relative;
}

form.contact-form input[type=text]{
    position:aboslute;
    top:0;
}

form.contact-form input[type=submit]{
    position:absolute;
    top:0;
}

此方法将表单的元素推到顶部，这在turn 确保对齐。 js fiddle here -> http://jsfiddle.net/xcpSg/

使用表格
表格也可以帮你完成这项工作。 Facebook 使用此方法适用于主页顶部的登录表单。