块元素内嵌块元素的垂直对齐

Question

请在这里找到我的fiddle，我想了解div.panel内嵌块元素（div.lbl）的垂直对齐背后的逻辑。

<style> 
    label, .lbl { 
     width:292px; 
     display:inline-block; 
     /* text-align:left; */ 
    } 
    .val { 
     display:block; 
    } 
    .panel { 
     border-bottom: 1px dashed red; 
    } 


    .lbl { 
     color: magenta; 
    } 
    label { 
     color:black; 
    } 
</style> 
<div class="panel"> 
    <div class="lbl" for="firstname">First name: 
     <INPUT class="val" type="text" id="firstname" /> 
    </div> 
    <div class="lbl" for="description">Long field name Long field name Long field name Long field name Long field name Long field name Long field name: 
     <textarea rows="5" cols="25" class="val" id="description" ></textarea> 
    </div> 
    <div class="lbl" for="lastname">Long Last name Long Last name Long Last name 
     <INPUT class="val" type="text" id="lastname" /> 
    </div> 
</div> 
<div class="panel"> 
    <div class="lbl" for="firstname1">Long First name Long First : 
     <INPUT class="val" type="text" id="firstname1" /> 
    </div> 
    <div class="lbl">First name: 
     <textarea rows="5" cols="25" class="val" id="description1"></textarea> 
    </div> 
    <div class="lbl">Long field name Long field name Long field name Long field name Long field name: 
     <fieldset class="bank-address"> 
       <label for="address1">Bank Address Line 1</label> 
      <input type="text" value="" id="address1" name="address1" maxlength="9" /> 

       <label for="address1">Bank Address Line 2</label> 
      <input type="text" value="" id="address2" name="address2" maxlength="9" /> 
        <label for="address1">Bank Address Line 3</label> 
      <input type="text" value="" id="address3" name="address3" maxlength="9" /> 
        <label for="address1">Bank Address Line 4</label> 
      <input type="text" value="" id="address4" name="address4" maxlength="9" /> 
     </fieldset> 
    </div> 
</div> 

如果你注意到，所有的标签文本（洋红色）的垂直对齐底部和各自领域的元素垂直对齐顶部使得文本的底部在同一行和域元素的顶部对齐似乎排在同一行。 （Click here查看小提琴页面的显示）这是我试图实现的对齐方式，适用于Firefox，Chrome & Safari。但在所有IE中看起来不同。

在IE中，似乎所有的div.lbl都有垂直对齐的底部。

有没有办法可以在IE中带来同样的效果呢？

感谢。

Answer 1

您可以通过在输入框周围添加div元素，然后将类为“val”的元素设置为float:left来获得所需的效果。对字段集也做同样的事，并给它类“val”。

添加的div会导致输入元素在新行上开始，并且float将输入元素带出流，并将每个行内块框中的最后一行文本用作该行的基线框。

请参阅http://jsfiddle.net/DaZWW/