vertical-alignment - ブロック要素内のインラインブロック要素の垂直方向の配置

Question

ここで私のフィドルを見つけてください。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>

お気づきのように、すべてのラベル テキスト (マゼンタ) は下に垂直に配置され、それぞれのフィールド要素は上に垂直に配置され、テキストの下部が同じ行に配置され、フィールド要素の上部が同じ行に配置されているように見えます。ライン。(フィドルページの表示を見るにはここをクリックしてください) これは私が達成しようとしている配置であり、Firefox、Chrome、および Safari で動作します。しかし、すべてのIEで異なって見えます。

IE では、すべての div.lbl が下に垂直に配置されているようです。

IEでも同じ効果をもたらす方法はありますか?

ありがとう。