☰

Очистка плавающих элементов с помощью CSS и IE7?

tag-icon • tag-icon internet-explorer html css internet-explorer-7
Очистка плавающих элементов с помощью CSS и IE7?

Я целый день ломал голову, пытаясь заставить float и clears работать правильно в старых версиях Internet Explorer. Я прочитал множество руководств по использованию трюка .clear:after и т. д., но так и не смог заставить что-либо работать!

У меня есть такой HTML:

<div id="section">
  <h2>Section Title</h2>

  <label for="name">Name</label>
  <input type="text" id="name" />

  <label for="dob">Date of Birth</label>
  <input type="text" id="dob" />

  <label for="email">Email</label>
  <input type="text" id="email" />
</div>

И CSS такой:

#section {border:solid 2px #b7ddf2; background:#ebf4fb; margin-top: 20px;}
#label{clear: left; float: left; width: 300px; margin-left: 20px; margin-bottom: 10px;}
#input{float: left; margin-bottom: 10px;}

В современных браузерах, например Opera 25, отображается следующим образом:

Name            [Name field]
Date of birth   [Date of birth field]
Email           [Email]

В старых версиях Internet Explorer (6 или 7) это отображается так:

Name            [Name field] [Date of birth field] [Email field]
Date of birth
E-mail

Я не хочу вносить изменения в HTML. Может ли кто-нибудь помочь мне с исправлением CSS?

решение1

То, что вы пытаетесь сделать, — плохая идея, поскольку, во-первых, никто не должен прилагать столько усилий для поддержки IE6 в новом веб-приложении, а во-вторых, ваша HTML-структура негибкая и будет работать только в очень специфическом сценарии.

Однако мне было любопытно посмотреть, можно ли преодолеть классические ошибки IE6 float исключительно с помощью CSS и без дополнительного HTML, и, как ни странно, это оказалось возможным. Хитрость заключается в том, чтобы использовать выражения CSS IE для внедрения элементов <br> на страницу после текстовых полей.

Следующий код сработал у меня в IETester при эмуляции IE6 и IE7:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style type="text/css">
            #section {border:solid 2px #b7ddf2; background:#ebf4fb; margin-top: 20px; display: block; zoom: 1}
            label{clear: left; float: left; width: 300px; margin-left: 20px; margin-bottom: 10px;}
            input{
                float: left;
                margin-bottom: 10px; 
                *zoom: expression(this.runtimeStyle.zoom="1", 
                    this.parentNode.insertBefore(document.createElement("br"), this.nextSibling).style.cssText="clear:both;font:0/0 serif");
            }
        </style>
    </head>
    <body>
        <div id="section">
            <h2>Section Title</h2>

                <label for="name">Name</label>
                <input type="text" id="name" />


                <label for="dob">Date of Birth</label>
                <input type="text" id="dob" />


                <label for="email">Email</label>
                <input type="text" id="email" />

        </div>
    </body>
</html>

На основе информации изэта страница

Связанный контент