是时候使用CSS框架了。尽管时光飞逝，我这对于CSS兼容性的恐惧依然没有很好的应对方法。对于我这种偶尔写写代码的人来说，通过学习一个相对规范的CSS框架，也有助于我更好的认识css的复位、思考模式、兼容性技巧。
通过初步了解（2-3个小时的时间），归纳出了三个常见的CSS框架：yuml、blueprint、960。yahoo的YUI看上去比较恐怖，于是算了。
yuml是德国货，看上去非常全面，从固定布局到可变布局通吃，相对来说blueprint和960就小得多，而且是固定布局。这两个框架都比较活跃，而且几乎是同时出现，但是blueprint是950宽度的设计，个人比较不习惯，于是偏向于选择960框架。960基本满足了我现阶段的需求：简单，而且仅面向布局设计，设计思路比较容易搞清楚，英文注释比较浅显，复位样式和兼容性设计都不差。于是将学习心得做一个笔记。 继续阅读初识“960”css框架
BODY带上ID后，原来DIV末尾的“<p>（空格）</p>”被忽略，IE和FF都是这样。但是写上字符编码就可以占位，看来字符编码不是一个简单的替换关系，他的执行结果还是不同的两个东西。不过这个加ID的方法倒是可以让浏览器忽略掉一个空标签，有时候这个技巧应该会有用。唉，这种问题究竟是怎样的机制只有XHTML孔乙己才会去研究了，我只知道碰到了什么问题，用什么方式解决了他。传说任何车祸都不同，是不能再现的，浏览器调试代码似乎也是如此。
还有一个浮动的问题困扰了半天，一个图片居左文字居右的LI搞了半天就是不能平整无缝地连接，文字总是在IE6下多空一行。后来用清除浮动，顶开LI的方法解决了问题，做一个例子保存。今天发现，也许把IMG设置成块模式就可以了，不过现在懒得试了，可能性一半的样子。
<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>LI清除浮动</title>
<style type=”text/css”>
<!–
* {border:0; padding:0; margin:0;}
body {font-size: 14px;background-color: #FFFFFF;}
li {list-style-type: none;}
p {text-indent: 2em;}
#shebei {width: 300px;}
#shebei img {float: left;}
#shebei li {clear: both;height: 1%;}
–>
</style>
</head>
<body>
<div id=”shebei”>
<ul>
<li><img src=”images/PHOTO-TEST.gif” width=”110″ height=”130″ border=”0″ /><p>第二代前列腺无痛介入导融系统：该技术是目前国际上新一代高科技治疗前列腺疾病的新技术，曾多次获得泌尿
科权威人士权威人士权威人士权威人士的高度评价和肯定。</p>
</li>
<li><img src=”images/PHOTO-TEST.gif” width=”110″ height=”130″ border=”0″ />
<p>第二代前列腺无痛介入导融系统：该技术是目前国际上新一代高科技治疗前列腺疾病的新技术，曾多次获得泌尿科权威人士权威人士权威人士权威人士的高度评价和肯定。</p>
</li>
<li><img src=”images/PHOTO-TEST.gif” width=”110″ height=”130″ border=”0″ />
<p>第二代前列腺无痛介入导融系统：该技术是目前国际上新一代高科技治疗前列腺疾病的新技术，曾多次获得泌尿科权威人士权威人士权威人士权威人士的高度评价和肯定。</p>
</li>
<li><img src=”images/PHOTO-TEST.gif” width=”110″ height=”130″ border=”0″ />
<p>第二代前列腺无痛介入导融系统：该技术是目前国际上新一代高科技治疗前列腺疾病的新技术，曾多次获得泌尿科权威人士权威人士权威人士权威人士的高度评价和肯定。</p>
</li>
<li><img src=”images/PHOTO-TEST.gif” width=”110″ height=”130″ border=”0″ />
<p>第二代前列腺无痛介入导融系统：该技术是目前国际上新一代高科技治疗前列腺疾病的新技术，曾多次获得泌尿科权威人士权威人士权威人士权威人士的高度评价和肯定。</p>
</li>
<li><img src=”images/PHOTO-TEST.gif” width=”110″ height=”130″ border=”0″ />
<p>第二代前列腺无痛介入导融系统：该技术是目前国际上新一代高科技治疗前列腺疾病的新技术，曾多次获得泌尿科权威人士权威人士权威人士权威人士的高度评价和肯定。</p>
</li>
</ul>
</div>
</body>
</html>
如果样式表文件里存在下面这种样式写法要当心了
#header_right.kouhao{…}
#header_right.ppnk{…}
在FF和opera下，不会有问题，但是在IE6下，第二条将没有结果。
我是在调试背景图片的时候发现这个问题的，在第一个页面正常的背景图样式，在第二个页面就怎么也出不来，开始怀疑是名字和顺序的问题，后来在睡觉前突然想到是不是两条不能并存，今天一试果然如此。
设置一个宽800像素的容器，然后让容器里的A元素左浮动。一切正常。
这个800像素的容器如果设置左内填充（比如50PX），问题就出现了：容器的右边似乎出现了一个50PX的占位。而且这个占位的变化很不确定，似乎跟A的长度有关。
<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>无标题文档</title>
<style type=”text/css”>
<!–
.px800 {height: 50px;width: 800px;background-color: #FFFFCC;padding-left: 50px;}
.px800 a {line-height: 50px;background-color: #FF9900;font-size: 14px;padding-right: 20px;padding-left: 20px;float: left;}
–>
</style>
</head>
<body>
<div><a href=”#”>上山打老虎</a><a href=”#”>上山打老虎的人</a><a href=”#”>上山打老虎的人的枪</a><a href=”#”>上山打老虎老虎的人的枪的子弹</a><a href=”#”>上山打老虎老虎</a></div>
</body>
</html>
解决方案是：在A的样式中指定不换行：white-space: nowrap ，问题就消失了。在firefox下没有这个问题，如果设置A右对齐也没有这个问题。我不知道这个现象是不是已经讨论过了，能不能给个解释，是什么造成了这个莫名其妙出现的占位。如果他确实产生了内填充，那么设置一个不换行样式应该还是不能解决问题的啊。恳请有识之士赐教。
为了便于不使用IE6的同学查看效果，贴上对比图。
存在问题的图
加上禁止换行后的图
为了让FF能撑开父容器，所以加入了一个清除浮动层，谁知道FF的问题解决了，IE却出了个双倍底边距的问题，上边空50，下面就会空100。试了常见问题中的“双倍边距”解决方法，没有作用。如果取消这个清除浮动层，问题消失，所以基本确定症结是浮动产生的混乱。
<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>无标题文档</title>
<style type=”text/css”>
<!–
* {margin: 0px;padding: 0px;border: 0px;}
body {background-color: #480001;}
.book_list {padding: 100px; width: 720px;margin: 0 auto;background-color: #FF9900;overflow: hidden;}
.book_list_li {float: left;height: 170px;width: 330px;background-color: #990000;}
–>
</style>
</head>
<body>
<div>
<div><ul>
<li></li>
<li></li>
</ul></div>
<div style=”clear:both;”></div>
</div>
</body>
</html>
试了很多方法不行，无意给没有属性的DIV加上边框后问题消失，意识到可能是IE的haslayout问题。于是让“<div><ul>”中的DIV获得layout，设置属性，且高为1%就可以让他得到layout。显示正常。
IE在复杂DIV布局下容易产生边距计算上的错误，包括双倍边距、边距3PX累加等等。解决方法是强制浮动块的属性为内联。干脆以后所有作浮动的块，在设置浮动的同时就一定要加上内联属性。省得麻烦，本来左浮动就是内联样式，所以这个设置应该在意义上没问题，不属于累赘。
071222纠正：内联会让DIV失去“块”属性，会更乱。