IE 8 и 9 игнорируют ширину div - как заставить этот пример работать?

Следующая html-страница, кажется, нормально отображается в любом браузере, кроме IE 8 и 9:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
    <div style="width: 300px">

        <span style="white-space: nowrap;">
            <input type="radio" value="1" name="test" />Choice 1
        </span>
        <span style="white-space: nowrap;">
            <input type="radio" value="2" name="test" />Choice 2
        </span>
        <span style="white-space: nowrap;">
            <input type="radio" value="3" name="test" />Choice 3
        </span>
        <span style="white-space: nowrap;">
            <input type="radio" value="4" name="test" />Choice 4
        </span>
        <span style="white-space: nowrap;">
            <input type="radio" value="5" name="test" />Choice 5
        </span>
        <span style="white-space: nowrap;">
            <input type="radio" value="6" name="test" />Choice 6
        </span>
        <span style="white-space: nowrap;">
            <input type="radio" value="7" name="test" />Choice 7
        </span>

    </div>
</body>
</html>

HTML выглядит довольно прямо, но IE 8 и 9 игнорируют ширину в div и заставьте все варианты выбора в одной строке (IE 7 и все другие браузеры, отличные от IE, переносятся на 300 пикселей, как и должны).Как-то мне нужно, чтобы этот список переключателей переносился на заданную ширину, не отделяя радио от соответствующий выбор.

Я могу заставить IE 8 и 9 вести себя, если я изменю тип документа, однако я хотел бы избежать этого, если это возможно.

Я получаю такое же поведение, если я использую старую школу " nobr" вместо тегов span.

6
задан Troy 7 June 2012 в 18:49
поделиться