1. 使用XHTML格式写代码，并定义好DOCTYPE，因为这个会影响CSS的处理

2. div 的垂直居中问题

vertical-align:middle;将行距增加到和整个DIV一样高(line-height:100px;)，然后插入文字，就能垂直居中了。

缺点：需要控制内容不换行

3. margin 加倍问题

设置为float的div在IE下设置的margin会加倍，这是IE6的BUG。

解决：在此DIV上加入：display：inline;

4. 浮动IE产生双倍距离

#box{float:left;width:100px;margin:0 0 0 100px;}

此情况下IE会产生200px的距离 display:inline;-->使浮动忽略

Tips:

block与inline的区别：

block:总是在新行上开始、高度、宽度、行高、边距都可以控制(块元素)

inline:和其它元素在同一行上，不可控制(内嵌元素)

#box{display:block;} --> 可以为内嵌元素模拟为块元素

#box{display:inline;} --> 实现同一行排列的效果

#box{display:table;} -->

5. IE 宽度与高度的问题

IE不认min-*这个定义，但实际上它把正常的width和height当作有min的情况来处理。

如果只用宽度和高度，正常的浏览器这两个值都不会变

如果只用min-width和min-height，则IE下面就没有设置宽度和高度

解决：

#box{width:80px;height:35px;}

改为:

#box{width:auto;height:auto;min-width:80px;min-height:35px;}

6. 页面的最小宽度

min-width指定最小宽度，可以保证排版正确性。但IE不认识，解决如下：

把div放到body下，并给指定如下的样式：

#container{min-width:600px;width:expression(document.body.clientWidth < 600 ? '600px' : 'auto');}

Tips: 第二个width使用了js来判断，不太规范

7. DIV浮动IE文本产生3像素的BUG

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距

#box{float:left;width:800px;}

#left{float:left;width:50%;}

#right{width:50%;}

*html #left{margin-right:3px;} // 关键

<div id='box'>

<div id='left'></div>

<div id='right'></div>

</div>

8. IE 捉迷藏问题

当DIV应用复杂的时候每个栏中又有一些链接，IE会出问题：有些内容显示不出来，但鼠标选择这个区域的时候，内容又是有的

解决：设置line-height或者给固定高度和宽度

9. 无法定义1px左右的高度的容器

解决：overflow:hidden; / zoom:0.08; / line-height:1px;

10. 让层显示在 FLASH 之上

给flash设置透明： <param name='wmode' value='transparent'/>

11. 定位一个层垂直居中于浏览器中

技巧： 百分比绝对定位与外补丁负值。Tips： 负值的大小为自身宽度高度除以2

参考样式：

<style type="text/css">

div {

position: absolute;

top: 50%;

left: 50%;

margin: -100px 0 0 -100px;

width: 200px;

height: 100px;

border: solid 1px #F00;

}

</style>

12. DIV 居中问题

div设置margin-left:auto;margin-right:auto;时已居中，但IE不认，需要在body中居中，即在父级元素中定义text-align:center;

即：在父级元素内的内容居中

13. a标签加边框与背景色

需要设置其为 display:block;且设置float:left;来保证不换行

14. 链接访问过hover样式就不出现了

解决：改变属性的排序-> L -> V -> H -> A

参考样式：

<style type="text/css">

a:link{}

a:visited{}

a:hover{}

a:active{}

</style>

15. cursor

cursor:pointer;兼容IE与FF，但hand仅在IE有用

16. ul的margin与padding

ul在FF中默认有padding值，而在IE中只有margin有值，所以需要预先就定义ul{margin:0;padding:0;}

17. form标签

在IE中，form会有边距，而FF中margin则为0；

解决： form{margin:0;padding:0;}

18. 实在没有解决了，可以使用 ！important 配置