☰

¿Borrar flotadores con CSS e IE7?

tag-icon • tag-icon internet-explorer html css internet-explorer-7
¿Borrar flotadores con CSS e IE7?

Me he estado golpeando la cabeza durante un día tratando de que los flotadores y borrados funcionen correctamente en versiones anteriores de Internet Explorer. He leído numerosos tutoriales sobre el uso de .clear:after trick, etc., ¡pero no consigo que nada funcione!

Tengo HTML como este:

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

Y CSS así:

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

En los navegadores modernos, por ejemplo Opera 25, se muestra lo siguiente:

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

En versiones anteriores de Internet Explorer (6 o 7), se muestra como:

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

No quiero ajustar mi HTML. ¿Alguien puede ayudarme con una corrección de CSS?

Respuesta1

Lo que está tratando de hacer es una mala idea ya que, en primer lugar, nadie debería hacer tanto esfuerzo para admitir IE6 en una nueva aplicación web y, en segundo lugar, su estructura HTML no es flexible y solo funcionará en un escenario muy específico.

Sin embargo, tenía curiosidad por ver si los clásicos errores flotantes de IE6 se podían superar únicamente con CSS y sin HTML adicional y, sorprendentemente, parece posible. El truco consiste en utilizar expresiones CSS de IE para inyectar elementos <br> en la página después de los cuadros de texto.

El siguiente código funcionó para mí en IETester al emular IE6 e 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>

Basado en información deesta página

información relacionada