常见的浏览器兼容性问题
1.不同浏览器当中，很多的标签的默认样式不同，如默认的外部丁内补丁。
产生条件：不同浏览器；
解决办法：利用CSS reset文件进行样式的清除，然后再根据需要进行设置。
2.横向双倍外边距
产生条件：在IE6中块元素浮动后，会出现横向双倍margin现象。
解决办法： 在float标签的样式控制中加入display：inline
3.默认行高
产生条件：IE6、IE7、遨游浏览器；设置的文字高度超出盒模型内容区域设置的高度时会影响布局。
解决办法：给超出高度的标签设置overflow：hidden；或者将文字的行高line-height设置为小于块的高度。
4.input 聚焦框颜色与样式不同
产生条件：各个浏览器表现不同；
处理方法：使用outline:none，清除默认样式之后再统一设置。
5.img外部的border
产生条件：img外部有a标签，即img标签有链接时
解决办法：设置img边框border:0;
6.图片默认有间距。
产生条件：img标签（每个img之后敲了回车）
解决办法：为img设置float的浮动布局方式。
7.经典3像素bug
产生条件：IE6浏览器，浮动块元素与未浮动块元素处于同一行，有默认的3px间距。
解决办法：设置非浮动元素浮动。
8.默认行高
产生条件：清除浮动的时候，有些人会采取一种清浮动的方法，使用一个空的div，然后为这个div设置{clear：both}。在大部分
浏览器当中，这样做是没有任何问题的，但是在IE6浏览器当中，div即使是空的，也会存在默认行高。
解决办法：设置其高度为0，并设置overflow:hidden。{height:0;overflow:hidden;clear:both;}
9.a标签hover不适用于所有标签
产生条件：IE6浏览器中hover只支持a标签的使用，不支持一切其它标签使用；
解决办法：合理用a标签嵌套其他行内标签或者用javascript模拟a的hover效果；详情请查看日志：兼容IE6 a标签hover效果
10.table标签当中border-color属性设置无效
产生条件：IE6中table设置属性border-color无效；
解决办法：运用CSS样式进行控制，而不是使用属性进行样式的处理。
11.png格式图片
产生条件：IE6浏览器，不支持透明；
解决办法：使用javascript进行处理；或者使用gif、jpg图像替代掉png图片的使用。
12.透明rgba与opacity
产生条件：IE6不支持此两种透明的设置方法；
解决办法：使用IE6当中的滤镜filter替代掉，如：opacity:0.6;filter:alpha(opacity=60)。
13.子选择器在IE6中不能使用
产生条件：IE6浏览器，使用E>F子选择器；
解决办法：采用其他选择器或者采用后代选择器进行控制，如：div p{margin:10px;} div p p{margin:0;}替代掉 div>p{margin:10px;}。
14.鼠标移上小手效果
产生条件：IE6，cursor:hand ：IE完全支持。但是在firefox是不支持的，没有效果。cursor:pointer ：是CSS2.0的标准。所以firefox是支持的，但是IE5.0既之前版本不支持。IE6开始支持。；
解决办法：设置两种cursor:pointer ; cursor:hand。
15.子标签无法撑开父标签的高度
产生条件：父标签内部含一个或多个子标签，父标签没有设置浮动，而子标签发生浮动；
处理方法：方法1：在子标签最后添加清除浮动的设置<div style='height:0;clear:both'></div>;
方法2：为父标签添加{overflow:hidden;}的样式；
方法3：为父标签设置固定高度。
16.li的间距问题
产生条件：IE6浏览器 li标签设置宽高，且li里面的元素发生了浮动；
处理方法：方法1：li不设置宽高； 方法2：li内部的标签不进行浮动。
17.行内元素布局混乱
产生条件：行内元素为包含框时，如果包含框包含的绝对定位元素以百分比为单位进行定位；
处理方法：在行内元素当中加入{zoom:1}，触发IE的hasLayout。
18.多显示一个字
产生条件：多个浮动元素中间夹杂HTML注释语句，浮动元素宽度设置为100%；则在下一行多显示一个上一行的最后一个字符；
处理方法：果断删掉注释！
19.CSS优先级 ！important
产生条件：IE6当中，在同一组CSS属性中，!important不起作用；
处理方法：单独设置。
20.img图片下部高度多余5px
产生条件：IE6浏览器；
处理方法：将图片转化为块级对象，即display:block。
