2010-03
22

又撞li了

By xrspook @ 20:27:00 归类于:烂日记

为啥每次li都是我的绊脚石呢?对这东西又爱又恨~~~

正在折腾着自己第一个原创WP主题,遇到个关于li的问题,却无意中轰炸起别人的邮箱……第一次,发现代码都被认作真代码了,全部被隐藏掉,第二次加上了<!– –>,被隐藏得更彻底,骨头都没剩,第三次,把什么<>等全部删掉,剩下div,ul,li等干涩东西,对方应该明白吧。

真是罪过~~~

很多CSS和XHTML教程手册什么的,但有时我们需要的只是很简单的技巧提醒。做了个CSS测验,结果20题答对了19题,错的那题原因是审题没审好,人家要首字母大写,我看成了全部大写,结果就出状况了。非常简答的一个测试,用过CSS做实战的人都不会觉得有难度,预定的答题时间是20分钟,结果我3分钟内就完成了,如果网速再快点的话,我有信心做得更快。但显然,考验CSS用得怎样不是靠那些测验去“评价”的,网页就是一个非常好的展示空间,展示你的成绩,暴露你的错误,在IE之下,我的网页通常是很掩脸的,总想不明IE为啥有这样那样的疙瘩,难道完全遵循标准设计浏览器就那么难?(扯远了,这个其实我一点都不懂)

努力吧,要高歌猛进!

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搞得鸡毛鸭血~~~~

Page 1 of 11
COPYRIGHT @ 我的天 | Theme by xrspook | Power by WordPress | Valid XHTML 1.1 and CSS 3 Go to top