动态垂直多列列表在 IE 中不起作用

Question

Blow 代码完美适用于 Mozilla、Safari 和 Chrome，但不适用于 IE 7、8、9。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css"> 
ul {margin: 0; padding: 0; list-style: none;float:left;}

.column {
    background-color: #fff;
    border: 1px solid #999;
    padding: 8px;
    width:40%;
}
label{
   float:left;
}
ul li a{
    display:block;
    float:left;
    width: 120px;
    margin: 0 5px 0 5px;
}
ul li {
    clear:both;
    margin: 0 0 5px 0;  
    overflow:hidden;
}
.column {
/* the proper rules ready for future */
column-count: 3;
column-gap: 20px;

/* Moz/Firefox rules */
-moz-column-count: 3;
-moz-column-gap: 20px;

/* Safari & Chrome rules */
-webkit-column-count: 3;
-webkit-column-gap: 20px;
}
</style>
</head>
<body>
<ul class="column">
    <li><label><input type="checkbox"></label>Francoise Barre-Sinoussi</li>
    <li><label><input type="checkbox"></label>Rachel Carson</li>
    <li><label><input type="checkbox"></label>Shirley M. Tilghman</li>
    <li><label><input type="checkbox"></label>Jane Goodall</li>
    <li><label><input type="checkbox" ></label>Marie Curie</li>
    <li><label><input type="checkbox" ></label>Rosalind Franklin</li>
    <li><label><input type="checkbox" ></label>Svetlana Savitskaya</li>
    <li><label><input type="checkbox" ></label>Mae Jemison</li>
    <li><label><input type="checkbox" ></label>Mayim Bialik</li>
    <li><label><input type="checkbox" ></label>Sally Ride</li>
</ul>
</body> 
</html>

我必须应用哪些 hack 才能使其在 IE7、8 和 9 中运行。

Answer 1

IE 不支持 CSS column-count。

我看到的唯一解决方案是更改 html 结构和 css：

See the jsfiddle demo

HTML：

<div class="border">
<ul class="column">
    <li><label><input type="checkbox"></label>Francoise Barre-Sinoussi</li>
    <li><label><input type="checkbox"></label>Rachel Carson</li>
    <li><label><input type="checkbox"></label>Shirley M. Tilghman</li>
</ul>
<ul class="column">
    <li><label><input type="checkbox"></label>Jane Goodall</li>
    <li><label><input type="checkbox" ></label>Marie Curie</li>
    <li><label><input type="checkbox" ></label>Rosalind Franklin</li>
</ul>
<ul class="column">
    <li><label><input type="checkbox" ></label>Svetlana Savitskaya</li>
    <li><label><input type="checkbox" ></label>Mae Jemison</li>
    <li><label><input type="checkbox" ></label>Mayim Bialik</li>

</ul>
<ul class="column">
    <li><label><input type="checkbox" ></label>Sally Ride</li>
</ul>
</div>​

CSS：

ul {margin: 0; padding: 0; list-style: none;float:left;}

.column {
    background-color: #fff;
    padding: 8px;
}
.border {
    border: 1px solid #999;
    float: left;
}
label{
   float:left;
}
ul li a{
    display:block;
    float:left;
    margin: 0 5px 0 5px;
}
ul li {
    clear:both;
    margin: 0 0 5px 0;  
}

Answer 2

试试这个css代码，

ul {margin: 0; padding: 0; list-style: none;float:left;}

.column {
background-color: #fff;
border: 1px solid #999;
padding: 8px;
width:500px;
}
ul li {
float:left;
margin: 0 0 5px 0;  
overflow:hidden;
width: 200px;
background-color: orange;
margin-right: 10px;
}
.column {
/* the proper rules ready for future */
column-count: 3;
column-gap: 20px;

/* Moz/Firefox rules */
-moz-column-count: 3;
-moz-column-gap: 20px;

/* Safari & Chrome rules */
-webkit-column-count: 3;
-webkit-column-gap: 20px;
}