IE7 div boîtes avec clair: droite et float: gauche - flotter vers le haut

Question

dernièrement, j'ai claqué ma tête contre mon bureau pour résoudre ce problème. N'a pas fonctionné. Je sais que cela peut être résolu en éditant le contenu avec quelques éléments de compensation. Malheureusement, il y a un peu de tri javascript utilisé et le Sourcode est généré par CMS Components, ce qui serait mon dernier coup.

Je vais avoir quelques boîtes flottantes toutes les 2 dans une rangée. Les boîtes ont une hauteur différente mais égale largeur et sont toutes placées dans un conteneur avec une largeur statique. Le lien montre la source dont j'ai besoin pour reproduire le problème. Mes boîtes sont en train de flotter à gauche. J'ai essayé de régler cela avec clair: à gauche sur impair et clair: à droite sur les éléments pairs. Mais cela ne fonctionne que dans les navigateurs ff/ie8/chrome, pas ie7.

Exemple: http://www.i3rutus.de/ie7divfloatexample/

Tout le monde sait la possibilité de résoudre ce problème en modifiant simplement le CSS pas le XHTML réelle? Le problème apparaît dans IE7. IE8, Chrome et FF fonctionnent très bien.

Des idées?

Merci à l'avance

Answer 1

Voici l'affaire. Vous avez seulement besoin de flotter une de chacune des paires de boîtes. Voici les règles CSS modifiées:

.even { 
    float: left; 
    clear: left; 
    margin-top: 0 
    } 

    .odd {    
    } 

Demo

(Soit dit en passant, votre utilisation de bizarre et m'a même eu chasser ma queue pendant un certain temps;))

Answer 2

Si vous êtes en mesure d'inclure un js dans l'en-tête alors peut-être essayer d'utiliser http://code.google.com/p/ie7-js/?

Je l'ai joué avec float: à droite, c'est un peu plus complexe que d'expérimenter avec des valeurs float.

- mise à jour -

me semblait être en mesure de le faire fonctionner dans IE7 par:

supprimer float: left sur .clear, flottant ajouté: left; margin-top: 0px à .même

Answer 3

Juste enlever

.even { 
    clear: left; 
} 
.odd { 
    clear: right; 
} 

et il fonctionne comme intented.