IE和空白

Question

我有PHP從數組創建一個內聯無序列表。 對於這些列表項中的每一個，我都需要指定“空白：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中（請注意：整個列表位於“ listdivs”類的div中）：

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

此功能在Chrome和Firefox上運行良好，可以在適當的時間將列表包裝起來。 但是IE會忽略合法的空格，並將整個列表打印在一行上。 我該如何補償？

Answer 1

嘗試添加跨度周圍的內容。

.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>

這個技巧在某些ui中使用很多，例如jqueryui，yahooui，extjs