☰

Limpando carros alegóricos com CSS e IE7?

tag-icon • tag-icon internet-explorer html css internet-explorer-7
Limpando carros alegóricos com CSS e IE7?

Estou batendo a cabeça há um dia tentando fazer com que floats e clears funcionem corretamente em versões mais antigas do Internet Explorer. Eu li vários tutoriais sobre como usar o truque .clear:after, etc., mas não consigo fazer nada funcionar!

Eu tenho HTML assim:

<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>

E CSS assim:

#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;}

Em navegadores modernos, por exemplo, Opera 25, é exibido da seguinte forma:

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

Nas versões mais antigas do Internet Explorer (6 ou 7), é exibido como:

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

Estou ansioso para não ajustar meu HTML. Alguém pode me ajudar com uma correção de CSS?

Responder1

O que você está tentando fazer é uma má idéia, pois, em primeiro lugar, ninguém deveria fazer tanto esforço para oferecer suporte ao IE6 em um novo aplicativo da Web e, em segundo lugar, sua estrutura HTML não é flexível e só funcionará em cenários muito específicos.

No entanto, eu estava curioso para ver se os clássicos bugs float do IE6 poderiam ser superados puramente com CSS e sem HTML extra e surpreendentemente isso parece possível. O truque é usar expressões CSS do IE para injetar elementos <br> na página após as caixas de texto.

O código a seguir funcionou para mim no IETester ao emular o IE6 e o ​​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>

Com base em informações deesta página

informação relacionada