28172 sujets

CSS et mise en forme, CSS3

Bug propriété Clear sous IE 7

Hello à tous,

Je suis en train de me tirer une balle avec IE7 j'aimerai placer le bloc vert à la droite du bleu, mon code marche sur tous les navigateurs sauf IE7 qui fait comme sur la photo...

Si quelqu'un a une idée je suis plus que preneur. Merci Smiley smile

http://www.aspigeek.com/media/image/test.jpg 


<head>
    <title><!-- Insert your title here --></title>
    <style type="text/css">
    #wrapper{
        width:250px;
        background-color:#555;
        overflow:auto;
    }
    span{
        float:left;
        background-color:#f00;
    }
    #textField{
        float:left;
        background-color:#00f;
        clear:left;
        width:200px;
    }
    a{
        float:left;
        background-color:#0f0;
    }
    </style>
</head>
<body>
    <div id="wrapper">
        <span>label</span>
        <div id="textField">Ceci est un test CSS</div>
        <a href="#">+</a>
    </div>
</body>

Modifié par AspiGeek (31 Oct 2010 - 16:51)
Bonjour,
c'est un vieux bug herité des version anterieur de IE6, de vielles version d'opera avait aussi ce bug . (float + clear + floats suivants ignorant clear))

Tu peut tenter d'obtenir ce resultat en jouant sur le display:inline-block; plutôt que float et clear buggé:

exemple avec les CC
<!--[if lte IE 7]>
<style>
#textField{
         display:inline;zoom:1;
         float:none;
     }
a{
               float:none;
     }
</style>
<![endif]-->


Bonsoir,
GC
Merci à vous.

J'avais déjà testé le display:inline-block; mais sans succès sous IE7 mais chose étonnante c'est qu'en appliquant votre approche, avec un inline et un width sur le #textField, IE l'interprète du coup de la bonne façon un autre contournement que je ne connaissais pas.

Merci encore et bonne journée.
Sujet clos
Aller à