最近在做一些UT的工作，写一些HTML和CSS，又遇到了一直很头疼的浏览器兼容问题。
主要就是让人讨厌的IE6，总是需要进行很多特殊的处理。
遇到表格类型的HTML区域，我一直觉得用table是最合适的，解决局部的单层表格，table是最方便的，HTML语言加入table这个标签的初衷就在这里。
不过因应用需要，我这回必须要用div实现table的布局，只能硬着头皮搞了。
对表格区域，我用ul标签，用li作为每行的容器。
在每个li标签中，用div作为列单元的容器。
这会遇到几个问题，同时也有一些优点吧：
- （缺点）列的宽度必须用样式来定义，比如每行相同的列单元，都必须使用相同的class，在css中给这个class定义绝对宽度，用width=240px这类的语句，代码冗余比较多
- （缺点）每个div必须添加float:left的css定义，因为div是块状元素，默认是按行竖着排列的，设为浮动元素后，才可以横着排列
- （缺点）float:left这个属性的排列方式，我总结的是按左上原则，可以理解为左上角是引力中心，把每个float元素都紧紧地吸附着，如果右侧有空间，就顺序排列在右侧，如果没空间了，就到下面一行尽量靠左的位置开始排列……，因此如果宽度不够，改行左边单元的高度又高于其他单元，那么最右侧的单元会卡在左边的单元右侧，呃，可能不好理解，回头我给个图，专门说一下这个规则
- （缺点）li的高度默认不是自适应，当div单元的高度很大时，会突破li容器，影响下一行li的显示，呃……不过这个是有办法解决的，这篇文章主要就是来说明这个解决办法
- （优点）div对浏览器来说就是一个简单的元素，浏览器每读完一个div，就可以立即显示，不必等待所有html代码都下载完才画出页面，这也是大家不喜欢table的主要原因
- （优点）每行都有自己单独的列元素，每列的宽度可以不一致，这点table很难做到，即便能做到，也是用非常绕弯的方法，而用li+div来解决，就很灵活
看似缺点比较多，不过缺点都可以解决。
下面列举几个方法，就不一一对应了，其实道理都是相通的：
- float元素排列被卡住的问题，可以给同行的每个div单元设定一个足够的高度，这样就不会形成“阶梯”状排列的单元，当右侧没有足够的宽度容纳新单元时，这个单元会自动到下一行开始排列（有点像windows的资源管理器，显示图标的时候，就是按照这个规则，注意，windows的每个图标，都有足够的高度和宽度）
- li高度不会自适应，可以搞定，给每行li设置overflow:auto（注意，尽管默认就是auto，但是否显式指定，显最终的效果是不一样的），同时设置li的宽度，width用px绝对值，li中的每个div，也要设置绝对的宽度，这几项都是必须的，缺少任何一项都会导致页面错乱
- IE6的hack，其实现代浏览器，IE7+，Firefox，Opera和Safari等都可以很好地兼容div的页面布局，只有IE6很不兼容，网上也有很多hack方法，我觉得最好用的就是一点：只有IE6支持_开头的属性名，比如对margin的理解，IE6跟其他浏览器是不一样的，但在CSS中，我们可以这样写 div.test {margin:8px; _margin:4px;} ，那么，只有IE6会认为边距是4像素，其他浏览器都会认为是8像素，刚好解决IE6的问题。
简单的说说就这些了，也是最近几天的心得，跟大家分项一下~~
区别不同浏览器，CSS hack写法：
区别IE6与FF：
background:orange;*background:blue;
区别IE6与IE7：
background:green !important;background:blue;
区别IE7与FF：
background:orange; *background:green;
区别FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
IE6 IE7 FF
* √ √ ×
!important × √ √
另外再补充一个，下划线”_”,
IE6支持下划线，IE7和firefox均不支持下划线。
于是大家还可以这样来区分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;
注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。
http://www.div-css.com/html/XHTML-CSS/hack/1136667.html