php - 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 中(注意:整个列表在类“listdivs”的一个 div 中):

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

这在 Chrome 和 Firefox 中运行良好，它在适当的中断处环绕列表。但是 IE 会忽略合法的空格并将整个列表打印在一行中。我该如何补偿？

Answer 1

尝试在内容周围添加 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>

这个技巧在一些 ui 中使用很多，比如 jqueryui、yahooui、extjs