HTML 表单对齐 - 带标签的输入

Question

我正在尝试让所有浏览器都可以访问它。不同的浏览器给出不同的结果（IE 对我来说问题最大）。我附上了屏幕截图，以便您可以看到我在说什么。

这是表单在 Safari、Firefox 和 Chrome 中的外观：

http://imageshack.us/photo/my-images/210/bildschirmfoto20120226u.png/

这是表单在 IE6 和 IE7 中的外观：

http://imageshack.us/photo/my-images/37/bildschirmfoto20120226u.png/

这是 IE8 和 IE9：

http://imageshack.us/photo/my-images/39/bildschirmfoto20120226u.png/

HTML

<form method="post" action="?test" id="form">
    <label for="user">USERNAME</label>
    <input type="text" name="user" id="user" maxlength="100" title="Please enter your username." data-h5-errorid="empty-user" tabindex="1" required />
    <div id="empty-user" class="fail">This stuff will get replaced by the title contents.</div>
    <label for="password" class="clear">PASSWORD</label>
    <input type="password" name="password" id="password" maxlength="100" title="Please enter your password." data-h5-errorid="empty-password" tabindex="2" required />
    <div id="empty-password" class="fail">This stuff will get replaced by the title contents.</div>
</form>

CSS

label {
    background: yellow;
    font-size: 12px;
    font-weight: bold;
    width: 100px;
    float: left;
    margin-right: 50px;
    text-align: right;
    cursor: pointer;
}

input {
    height: 30px;
    background-color: #fafafa; 
    border: 1px solid #abaaaa;
    width: 300px;
    margin: 5px 0 5px 0;
    float: right;
}

现在我的问题是，如何对齐标签以使它们与输入字段垂直对齐？我在这里使用过搜索，而且大部分时间都使用了类似

vertical-align: middle;

是推荐的，但这根本不起作用。 Safari、Chrome 和 Firefox 的唯一解决方法是在标签上添加 margin-top 或 padding-top，但这会破坏 IE8 和 IE9 中的表单。

我能解决这个问题吗？降低输入字段的高度对我来说不是一个选项。

Answer 1

在输入标签（某处）之后放置一个clear:both。

我建议您在表单中添加更多标记以进行额外的自定义。通常我喜欢做这样的表格：

<div class="field">
    <label for="user">USERNAME</label>
    <div class="field-subject">
        <input type="text" name="user" id="user" maxlength="100" title="Please enter your username." data-h5-errorid="empty-user" tabindex="1" required />
    </div>
</div>

.field { 
    overflow: auto; /* this "clears" the floated elements */
    margin-bottom: 10px;
}

.field label {
    float: left;
    width: 200px;
}

.field .field-subject {
    float: left;
    width: 500px;
}