Ошибка IE7 (режим совместимости IE8): сумасшедшая ширина, применяемая к плавающему элементу, который является родительским для другого плавающего элемента

Вот моя проблема. Он отлично выглядит в Firefox, Safari, IE8, но в режиме сравнения IE7 и IE8 он добавляет около 4000 пикселей ширины к элементам div.team, вложенным в элемент списка. проблема исчезнет, ​​если я удалю элементы span.score.

На прикрепленном изображении показана оценка в первом поле белым числовым текстом. Верхнее изображение - это то, как оно должно выглядеть. Внизу IE7.

Я пытался понять это часами. Я даже пытался составить список из блоков div на случай, если это странная ошибка элемента списка IE7, но получил точно такие же результаты.

Вот мой 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>
        ...

Вот мой 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;
    }