爱浮不爱浮的li
昨天的网页杯具终于被万恶给搞定了！他老人家道出了一个真理——<li>里面的块元素（如<span>）只要开始float就要float到底，无论里面有多少个，一定要全部float掉，否则就会出现莫名其妙的分行，然后在<li>那里设定“clear:both”来清浮。
但如果<li>里面有纯文字有<span>呢？文字也要弄个<span>括住，然后float掉？万恶说应该不用，但事实是残酷的。以下是我的测试代码：
<html>
<head>
<style type=”text/css”>
body{
background-color:#000000;
color:#ffffff;
}
#abc{
width:500px;
line-height:1.2em;
padding:20px 0 0 0;
margin:0;
}
a:link{
color:#00ff00;
}
a:visited{
color:#00ff00;
}
a:hover{
color:#00ff00;
}
ul{
list-style:none;
padding:0;
margin:0;
}
li{
clear:both;
list-style:none;
padding:0;
margin:0;
}
.left{
float:left;
padding:0 30px 0 10px;
background-color:#ff0000;
}
.right{
float:right;
background-color:#0000ff;
}
</style>
</head>
<body>
<div id=”abc”>
<ul>
<li>一个杯具，IE8、FF、Chrome正常，IE7、Opera不正常——囧</li>
<li><span>1111</span>2222<span><a href=”#”>3333</a></span></li>
<li><span>1111</span>2222<span><a href=”#”>3333</a></span></li>
<li><span>1111</span>2222<span><a href=”#”>3333</a></span></li>
<li><span>1111</span>2222<span><a href=”#”>3333</a></span></li>
<li><span>1111</span>2222<span><a href=”#”>3333</a></span></li>
<li><span>1111</span>2222<span><a href=”#”>3333</a></span></li>
</ul>
<br/><br/>
<ul>
<li>原来正解是li中的东西只要一开始float就要全部float，否则……这般全float后，IE、Firefox，Chrome，Opera都正常了</li>
<li><span>aaaa</span><span>bbbb</span><span><a href=”#”>cccc</a></span></li>
<li><span>aaaa</span><span>bbbb</span><span><a href=”#”>cccc</a></span></li>
<li><span>aaaa</span><span>bbbb</span><span><a href=”#”>cccc</a></span></li>
<li><span>aaaa</span><span>bbbb</span><span><a href=”#”>cccc</a></span></li>
<li><span>aaaa</span><span>bbbb</span><span><a href=”#”>cccc</a></span></li>
<li><span>aaaa</span><span>bbbb</span><span><a href=”#”>cccc</a></span></li>
</ul>
<br/><br/>
</div>
</body>
</html>
图就不贴了，因为我只有IE8（可以用兼容模式看到IE7的效果）、Firefox、Google Chrome、Opera，更高更低等级的IE都没有，Safari也没装，所以，欢迎大家猛击这里看各自的浏览器中的效果：floatli.html
老天啊，每次都被li搞得鸡毛鸭血~~~~
