2010-03
18

爱浮不爱浮的li

By xrspook @ 22:22:19 归类于: 烂日记

昨天的网页杯具终于被万恶给搞定了!他老人家道出了一个真理——<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搞得鸡毛鸭血~~~~

2010-02
4

转换成功

By xrspook @ 18:30:35 归类于: 烂日记

成功地原来基于table的网页转为基于div+css的,不是一般的兴奋啊!把14.8KB的网页刷地减肥成4.6KB,把杂乱的框架理顺为明了的层次。最后,在万恶的帮助下,解决了div的怪现象。叙述一下经过吧、

首先,我网页的一部分是这么设置的(问题简化版):

<html>
<head>
<title>test</title>
<style>
<!–
body { background-color:#000000;}
#main { background-color:#00ff00; width:755px; margin:0 auto;}
#left {background-color:#ff0000; width:200px; height:200px; float:left;}
#right {background-color:#0000ff; width:555px; height:600px; float:right;}
–>
</style>
</head>
<body>
<div id=”main”>
<div id=”left”></div>
<div id=”right”></div>
</div>
</body>
</html>

得出的结果如左图:

从上面的css可以看出,我是希望#main里面是#00ff00(绿色)的,也就是红色的下面应该是绿色,但显然,FF得不出,Opera得不出,Google Chrome也得不出,只有丑陋的IE实现了那个效果。为什么呢?Firebug指出,在上面的设置之下#main的高度为“0”,肯定得不出绿色!为什么呢?万恶说,那是css的浮动性导致的,因为我#main下有2个div,两个div都设置为浮动,浮动的元素是被撇除在外的,所以我们觉得#main里有东西,实际上却不认。万恶给我出个非常简单但有效的方案——在<div id=”right”></div>后面#main结束之前加上一句<div class=”clear”></div>(css里添.clear { clear:both;}),问题解决了!clear是干嘛的?清除浮动元素的!在两个浮动元素之后加个这么个空载div保证了#main里面有东西,又因为clear的设置是both,左右都不能有浮动元素,所以它肯定位于所有浮动元素的后面,把#main“撑”了出来。应该可以这么解释吧。现在才恍然大悟为什么BlogBus很多模板后面都有那么句空载的div,原来是这般用的。成功范例见右图。

我一直理所当然地认为在div里嵌div就能把外面的撑大,理论上是这样,但如果里面的div设置为float那就另当别论。真是郁闷到极点。又死在细节上,自学的东西不系统结果就会经常碰到抓破脑袋都搞不懂的情况。

除了这个难点以外,还有一个导航栏的问题,但经过我的瞎弄后,马虎成功了。

哇咔咔,鼓掌庆祝一下!

© 2004 - 2024 我的天 | Theme by xrspook | Power by WordPress