Chrome中的输入按钮位置已关闭？答案

【问题标题】：Input button position is off in Chrome?Chrome中的输入按钮位置已关闭？
【发布时间】：2012-09-15 00:09:36
【问题描述】：

当我在 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; }

截图：

【问题讨论】：

标签： css forms button input alignment

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

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

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

【讨论】：

position:absolute; 小提琴中的拼写错误。
感谢您提供表格建议，这解决了问题，而 CSS 解决方案没有任何效果。我仍然觉得这必须是 CSS 中解决此问题的一种方式吗？
我假设您说 CSS 时是指非表格，是的，您可以通过多种方式使用 CSS 来实现，它需要绝对和/或相对定位方面的基本知识。在大多数情况下，最终产品将是相同的，这完全取决于您作为编码人员选择哪种方法。

【解决方案2】：

这可能是您的代码本身的一个小错误

<img border="0" src="updateme.gif" width="132" height="30"></a>

在这里你给closing anchor tag 没有<a> 任何地方而且你也没有像下面这样关闭img标签。

<img border="0" src="updateme.gif" width="132" height="30"/>

通过纠正这些事情来检查。

【讨论】：

糟糕！谢谢你抓住它！（只是为了澄清，原来错误对手头的问题没有影响。）