浏览器不兼容问题

1：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6间距bug
行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6间距bug（类似第二种）
问题症状：ie6里的间距比超过设置的间距
碰到几率：20%
解决方案：在display:block;后面加入display:inline;display:table;
备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在ie6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。

2：图片默认有间距
问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
碰到几率：20%
解决方案：使用float属性为img布局

3：标签最低高度设置min-height不兼容
问题症状：因为min-height本身就是一个不兼容的css属性，所以设置min-height时不能很好的被各个浏览器兼容
碰到几率：5%
解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

4：一个ul便签，如果设置左浮动，比如li>5，便签如果设置为水平显示，li由左往右，如果设置右浮动，就是从右往左。比如一个导航栏，
首页 购买记录 关于 這是左浮动
关于 购买记录 首页 這是右浮动

5：垂直居中的问题 问题： 在浏览器中 想要垂直居中，设置vertical-align:middle; 不起作用。例如：ie6下文本与文本输入框对不齐，需设置vertical-align:middle1，但是文本框的内容不会垂直居中 解决： 给容器设置一个与其高度相同的行高 line-height:与容器的height一样

6：（新增） ie6默认div高度为一个字体显示的高度，所在ie6下div的高度大于等于一个字的高度，因此在ie6下定义高度为1px的容器，显示的是一个字体的高度 解决： 为这个容器设置下列属性之一
1、设置overflow:hidden;
2、设置line-height:1px;
3、设置zoom:0.08

7：div嵌套p时，出现空白行 问题：
div中显示<p>文本</p>，ff、oprea、Chrome：top和bottom都会出现空白行，但是在ie下不会出现空白行。 解决： 设置p的margin:0px，再设置div的padding-top和padding-bottom

8： IE6 weidth为奇数，右边多出1px的问题 问题： 父级元素采用相对定位，且宽度设置为奇数时，子元素采用绝对定位，在ie6中会出现右侧多出1像素 解决：
将宽度的奇数值改成偶数

9：list-style-position默认值的问题 问题： ie下list-style-position默认为inside, firefox默认为outside 解决： css中指定为outside即可解决兼容性问题

10：嵌套使用ul、li的问题 问题： ie的bug，嵌套使用ul、li时，里层的li设置float以后，外层li不设置float, 里面的ul顶部和它外面的li总是有一段间距 解决： 设置里面的ul的zoom:1

11：li中的内容以省略号显示 问题： li中内容超过长度时，想以省略号显示， 此方法适用于ie6-7-8、opera、safari浏览器 ff浏览器不支持 解决： li{width:200px; white-space:nowrap;text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; }