IE и пробел

Question

У меня есть PHP, создающий встроенный неупорядоченный список из массива.Для каждого из этих элементов списка мне нужно указать «white-space: nowrap», потому что у меня есть флажки рядом с текстом, и они не должны быть разделены.Однако в противном случае список должен переноситься нормально, поскольку он не должен применяться вне элементов списка.

<ul>
    <?php
    foreach ($nonfiction as $nonficid => $nonficgenre) {
        echo "<li><input type=\"checkbox\" name=\"genre[]\" value=\"$nonficgenre\"";
        if (in_array($nonficgenre, $selectedgenres)) {
            echo " checked=\"checked\"";
        }
        echo " /><span class=\"genrelabel\">$nonficgenre</span></li> ";
    }
    ?>
</ul>

И в моем CSS (примечание: весь список находится в div класса "listdivs"):

.listdivs li {
    display: inline;
    white-space: nowrap;
}

Это прекрасно работает в Chrome и Firefox, что оборачивает список при соответствующем перерыве.Но IE игнорирует допустимые пробелы и выводит весь список в одну строку.Как я могу компенсировать это?

Answer 1

попробуйте добавить содержимое span span.

.listdivs li {
    display: inline;
    white-space: nowrap;
}
.listdivs li span {
    white-space: nowrap;
}

<ul>
    <?php
    foreach ($nonfiction as $nonficid => $nonficgenre) {
        echo "<li><span><input type=\"checkbox\" name=\"genre[]\" value=\"$nonficgenre\"";
        if (in_array($nonficgenre, $selectedgenres)) {
            echo " checked=\"checked\"";
        }
        echo " /><span class=\"genrelabel\">$nonficgenre</span></span></li> ";
    }
    ?>
</ul>

Этот трюк часто используется в некоторых интерфейсах, таких как jqueryui, yahooui, extjs