الفرق IE وبكت

Question

وهذا هو قانون بلدي للحصول على نموذج لطيفة تبحث:

<dl>
    <dt class='breed'><label for="nwberichten">Fieldname</label></dt>
    <dd>
        Input
    </dd>
    <div class='clear'>&nbsp;</div>
</dl>
<dl class='oe'>
        <dt class='breed'><label for="nwberichten">Fieldname</label></dt>
        <dd>
            Input
        </dd>
        <div class='clear'>&nbsp;</div>
    </dl>

ومع CSS معلمات أكثر

dl {margin-top:0px;}
dt {float:left; text-align:right; width:120px; line-height:25px; margin:0 10px 10px 0;}
dd {float:left; width:400px; line-height:25px; margin:0 0 10px 0;}
DL  {
    border-bottom:1px dashed #aaa;
    margin:0px;
    line-height:20px;
    padding-top:6px;;
}

DL DD   {
    line-height:20px;
    background:transparent;
}
DT  {
    line-height:20px;
    background:transparent;
}
DL.oe   {
    background:#efe;
}

في بكت (على سبيل المثال سفاري) الصف تفاوت، واحد مع #efe BG اللون تبدو مثالية. وBGCOLOR يذهب من الحدود متقطع واحدة إلى أخرى. في IE واللون هو 10px فقط (أو نحو ذلك) عالية وافسدت يبدو حتى.

وكيف يكون هذا ممكنا؟

Answer 1

وسأشرح بإيجاز ما فعلت ولماذا. هو رمز في نهاية المطاف.

والخطأ الأول هو استخدام divs تطهير داخل عنصر dl. يمكن أن تحتوي dl فقط dds وdts. لتحقيق تطهير يمكنك ضبط overflow إلى hidden لdls الخاص بك. ويحقق نفس الأثر. وهذا أيضا ربما كان السبب في صفحتك تبدو قليلا افسدت في IE (بسبب divs في dls)

وأما بالنسبة لبقية، أنا تنظيف فقط حتى CSS الخاص بك قليلا.

وHTML:

<dl>
    <dt class="breed"><label for="nwberichten">Fieldname</label></dt>
    <dd>
        Input
    </dd>
</dl>
<dl class="oe">
    <dt class="breed"><label for="nwberichten">Fieldname</label></dt>
    <dd>
        Input
    </dd>
</dl>

وCSS:

dl { margin:0; padding-top:6px; overflow:hidden; border-bottom:1px dashed #aaa; }
dl.oe { background:#efe; }
dt, dd { float:left; line-height:25px; background:transparent; }
dt { text-align:right; width:120px; margin:0 10px 10px 0;}
dd { width:400px; margin:0 0 10px 0;}