IE7 (IE8 Compatability Mode) bug: une grande quantité de largeur appliquée à un élément flottant qui est parent d'un autre flotteur

Question

Voici mon problème. Il semble parfait dans Firefox, Safari, IE8, mais en mode de comparabilité IE7 et IE8, il ajoute environ 4000px de largeur aux éléments div.team imbriqués dans l'élément de la liste. le problème disparaît si je supprime les éléments span.score.

L'image ci-jointe montre le score dans la première case du texte en blanc. L'image du haut est la façon dont il est censé regarder. Le fond est IE7.

J'ai essayé de comprendre cela pendant des heures. J'ai même essayé de faire de la liste un tas de divs au cas où il s'agissait d'un bug de la liste IE7 bizarre, mais j'ai eu exactement les mêmes résultats.

Voici mon html:

<ul class="selected" data-league="ncaaf"> 
     <li> 
      <div class="time">THU 12:30PM</div> 
      <div class="teams"> 
       <div class="team">AUB (21) <span class="score">10</span></div> 
       <div class="team">MSST <span class="score">22</span></div> 
      </div> 
     </li> 
     ... 

Voici mon CSS:

.boxList ul { 
    float:left; 
    margin:0 0 0 0; 
    heigth:40px; 
    width:5000px; 
    clear:left; 
    display:none; 
} 
.boxList ul.selected { 
    display:block; 
} 

.boxList li { 
    float:left; 
    height:40px; 
    padding:0 5px; 
    min-width:56px; 
    background:url(../images/scoreSchedBoxTile.png) repeat-x; 
    border:1px solid #000; 
    list-style-type:none; 
    margin:0; 
    font-size:9px; 
    line-height:13px; 
    font-weight:bold; 
    cursor:pointer; 
    position:relative; 
} 

    .boxList li .time { 
     text-align:center; 
    } 
    .boxList li .teams { 

    } 

    .boxList li .team { 
     text-align:left; 

     color:#000; 
     clear:left; 
     line-height:13px; 
     height:13px; 
    } 

    .boxList li .score { 
     font-weight:bold; 
     text-align:right; 
     color:#fff; 
     float:right; 
     display:block; 
    } 

Answer 1

essayez d'utiliser:

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

Answer 2

La largeur de vos divs est réglé à 100%, de sorte que le div s'étend jusqu'à 100% de largeur et remplit tout l'espace horizontal disponible. Vous pouvez résoudre ce problème en appliquant une largeur fixe à vos divs.