Question

是否有一种简单的方法可以在所有主流浏览器中将标签与文本框对齐（即包括IE7？我在我的标签和文本框中将显示设置为内联块，这似乎可以在任何地方使用，但在IE7中，标签在div的底部。

<label class="inputLabel" for="emailTextBox">
            Email:</label>
<input class="textBox" type="text" id="emailTextBox" value=" Email address" />

input.textBox 
{
    margin-top: 5px;
    margin-bottom: 5px;
    height: 30px;
    width: 350px;
    font-size: 15px;
    font-family: Verdana;
    line-height: 30px;
    display:inline-block; 
}

label.inputLabel
{
    font-family: Verdana;
    font-size: 15px;
    line-height: 30px;
    display:inline-block;
}

Answer 1

IE7及以下版本的display:inline-block声明不是fully supported，因此您必须使用display:inline代替zoom:1 hasLayout hack来模仿声明明星黑客攻击目标IE7。要对齐文本框和标签，我们可以使用vertical-align:middle属性，如下所示：

<强> CSS

input.textBox {
    margin-top: 5px;
    margin-bottom: 5px;
    height: 30px;
    width: 350px;
    font-size: 15px;
    font-family: Verdana;
    line-height: 30px;
    display:inline-block; 
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    vertical-align:middle;
}

label.inputLabel {
    font-family: Verdana;
    font-size: 15px;
    line-height: 30px;
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
}

Demo

在所有浏览器中垂直对齐标签和文本框

1 个答案: