September 2008

最近在做一些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来解决，就很灵活 看似缺点比较多，不过缺点都可以解决。 下面列举几个方法，就不一一对应了，其实道理都是相通的： […]