¿Cómo soluciono este simple problema flotante de CSS en IE?

StackOverflow https://stackoverflow.com/questions/477157

Pregunta

tengo cuatro div Los elementos flotaron hacia la izquierda.El tercero div está despejado.
En Firefox y Chrome los elementos están colocados como se esperaba:El primero y el segundo divs son adyacentes entre sí y están por encima del tercero y cuarto divs que también son adyacentes entre sí.
IE7 por otro lado ocupa el cuarto lugar div adyacente al primero y al segundo divs con el tercero div abajo.

Sé que puedo solucionarlo agregando un br elemento después del segundo div pero prefiero no editar el marcado si no es necesario.¿Existe una forma más elegante de solucionar el problema?

He estado intentando buscar en Google una solución desde hace un tiempo pero no he encontrado ninguna, lo cual es bastante sorprendente considerando lo elemental que parece el problema.Quizás me estoy perdiendo algo obvio, ¿hay algún sitio de referencia que enumere problemas simples de CSS como este o simplemente no conozco el CSS básico?

Editar: Hice el código de muestra un poco más complejo después de que Nazgulled "resolvió" el problema (ver los comentarios).Ahora hay cuatro divs en lugar de tres y el tercero div se borra en lugar del segundo.

Aquí está el código fuente completo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>IE Float Test</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
            div
            {
                width: 100px;
                height: 100px;
                color: white;
                font-size: 3em;
                float: left;
            }

            #divone
            {
                background-color: red;
            }

            #divtwo
            {
                background-color: blue;
            }

            #divthree
            {
                background-color: green;
                clear: both;
            }

            #divfour
            {
                background-color: purple;
            }
        </style>
    </head>
    <body>
        <div id="divone">one</div>
        <div id="divtwo">two</div>
        <div id="divthree">three</div>
        <div id="divfour">four</div>
    </body>
</html>

Así es como se ve en Chrome:
Chrome sample

Así es como se ve en IE7:
IE Sample

¿Fue útil?

Solución 2

Varios meses después ...

Dejé de tratar de resolver este problema solo con CSS. Este es un error de IE7 que no puede evitar sin tocar su HTML.

La aplicación final de este patrón flotante fue en una forma, donde dos de los div s eran elementos de entrada y los otros dos <=> s eran sus etiquetas correspondientes. El patrón se usó varias veces de forma grande y realmente quería encontrar una solución elegante solo para CSS.

Finalmente terminé usando el Marco CSS orientado a objetos y envolviendo todos los elementos con elementos adicionales <=> s para crear el diseño deseado, como dicta OOCSS. Era la única forma de salvar mi alma del infierno CSS de IE7 y OOCSS no es tan malo una vez que completa su diseño inicial.


En verdad, la respuesta general es que este es el tipo de pregunta que haces cuando realmente no sabes lo que estás haciendo con CSS. Si tiene que crear un diseño complejo una vez en una luna azul, entonces probablemente no sepa lo que está haciendo; como fue el caso cuando hice esta pregunta.

Aunque es cierto que IE7 no puede procesar el CSS correctamente, también fue un caso de alcance erróneo de mi parte. CSS no es el lenguaje de diseño definitivo que un programador ingenuo haría y CSS no es realmente independiente de la estructura de su HTML. Una vez más, opté por tomar el camino más fácil usando el marco OOCSS cuando realmente debería tomarme el tiempo para aprender los fundamentos de CSS.

Por desgracia, tal es la consecuencia de los plazos.

Otros consejos

No sé si esto soluciona su problema real, pero arreglé su muestra de esta manera:

  • Eliminar el atributo flotante de div
  • Eliminar el atributo clear de #divtwo
  • Agregue flotante: izquierda a #divtwo y #divthree

Esto hace que se vea como su muestra de Chrome tanto en Firefox como en IE 7 (navegadores que probé).

No estoy seguro de cuál es su objetivo final aquí, pero sugeriría incluir los cuatro <div>s dentro de un elemento contenedor y aplicándole un ancho, luego eliminando el clear estilo de #divthree.Hacerlo de esta manera permitirá #divthree y #divfour moverse hacia abajo #divone y #divtwo sin borrarlos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>IE Float Test</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
                #divone, #divtwo, #divthree, #divfour
                {
                        width: 100px;
                        height: 100px;
                        color: white;
                        font-size: 3em;
                        float: left;
                }

                #divone
                {
                        background-color: red;
                }

                #divtwo
                {
                        background-color: blue;
                }

                #divthree
                {
                        background-color: green;
                }

                #divfour
                {
                        background-color: purple;
                }

                #container {
                        width: 200px;
                        zoom: 1;
                }
        </style>
    </head>
    <body>
    <div id="container">
        <div id="divone">one</div>
        <div id="divtwo">two</div>
        <div id="divthree">three</div>
        <div id="divfour">four</div>
    </div>
    </body>
</html>

El zoom propiedad en #container es necesario evitar la Error de escape de flotadores de IE6/7.

Si la solución anterior no es viable, puede agregar una <br> o <div> después #divtwo con el estilo clear: left;:

<div id="divone">one</div>
<div id="divtwo">two</div>
<br style="clear: left;" />
<div id="divthree">three</div>
<div id="divfour">four</div>

Esta es la técnica utilizada en un ejemplo de diseño de página flotante en westciv.com.

Intenta agregar: 

display:inline-block;

en #divtwo. Si eso funciona, por supuesto, agregaría algunos comentarios condicionales para IE7

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top