CSS problème avec IE9 et flottant divs alignement

Je rencontre un problème lorsque j'ai une gauche flottait div avec une image et une pile de deux divs sur la droite. Il affiche bien dans FF, Chrome et IE9 quand en mode de compatibilité, cependant le fond de la plupart des div obtient poussé au-dessous de l'image lorsqu'il est affiché en normal IE9...

Gauche de la div:

{
float: left;
clear: both;
margin-right: 10px;
}

Droit div (qui s'affiche sous sur IE9):

width: 350px;
float: right;
margin-left: 10px;
height: 150px;
overflow: hidden;

voici à quoi il ressemble dans IE9:
http://i.imgur.com/tXgAZaN.png

Voici à quoi il ressemble dans Chrome ou FF:
http://i.imgur.com/yLOFvew.png

InformationsquelleAutor happymoniker | 2013-03-27
  1. 4

    Je pense que c'est l'un de ceux-clair-de résoudre les problèmes. J'ai également exécuter dans ces problèmes chaque maintenant et puis. Le correctif, ou hack est de toujours ajouter un nouvel élément, un soi-disant pseudo-élément pour qu'il s'affiche correctement. Donc

    /**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

    Ici cf sera votre contenu

    Son de http://nicolasgallagher.com/micro-clearfix-hack/

    J'espère que cela résout-il pour vous, faites le moi savoir.

    InformationsquelleAutor Gerard
  2. 0

    S'il vous plaît essayez de donner à votre gauche div de largeur? et assurez-vous que les sommes à ajouter 😉

    InformationsquelleAutor user2194405
  3. 0

    trois choses à faire.

    1. Attribuer largeur totale du conteneur dans lequel la gauche et la droite div mensonge.
    2. Affecter la largeur de la largeur gauche. Alors que le texte de la droite div ne pas fusionner.
    3. Mettre une autre div de classe clr après le droit div sorte de compensation de la flotte à l'intérieur du conteneur dans lequel la gauche et la droite div détient.

    Exemple:

    <div id="container">
  <div id="left_div">

  </div>
  <div id="right_div">

  </div>
  <div class="clr" style="clear:both;"></div>
</div>

    Il fonctionne dans tous les navigateurs.

    Souviens de la largeur totale de left_div et right_div ne doit pas dépasser le conteneur.

    InformationsquelleAutor Hassaan