常见浏览器兼容问题及解决办法

一、不同浏览器解析元素默认的外边距和填充大小存在误差

解决方法：把当前页面的可视区域元素的边距和填充都默认初始化为0

二、元素height高度（通常小于10px）IE6以下会超出本身设置默认高度（19px）

解决方法：
		1、给超出元素设置overflow：hidden		
		2、font-size：0；（2px）

三、border元素边框1像素点状线（dotted）在IE6以及以下解析为虚线

解决方法：使用photoshop制作点状线图片，使用背景图片属性

四、元素外边距传递（BFC/hasLayout）
BFC：块级格式化范围决定元素如何对其内容定位和其他元素的关系。进行可视化布局的时候，BFC提供了一个环境HTML元素可以在这环境中按照一定规则布局，类似浮动会触发BFC，浮动元素内部子元素主要受该浮动元素影响，两个浮动元素之间互不影响（独立容器，该容器的box布局与该容器没关系）正常文档流中，box框可作为格式化上下文，类型有block/inline
触发条件：

1. float：不为none；
2. overflow：不为visibledisplay：
3. table-cell，table-caption，inline-block；其中任何一个position：不为relative和static

五、IE6，cursor：hand：IE完全支持。但是在Firefox是不支持的，没有效果。cursor：pointer：是CSS2.0的标准。所以Firefox是支持的，但是IE5.0既之前版本不支持。IE6开始支持

解决方法：设置两种cursor：pointer；cursor：hand

六、IE6浏览器 - img图片下部高度多余5px

解决方法：将图片转化为块级对象，即display：block

七、li的间距问题， IE6浏览器， li标签设置宽高，且li里面的元素发生了浮动；

解决方法：
		1、li不设置宽高；
		2、li内部的标签不进行浮动

八、子选择器在IE6中不能使用，IE6浏览器，使用父>子选择器

解决方法：采用其他选择器或者采用后代选择器进行控制
		如：div p {margin：10px}
			div p p {margin：0;} 替代掉div>p {margin:10px;}

九、透明rgba与opacity IE6不支持此两种透明的设置方法

解决方法：使用IE6当中的滤镜filter替代掉，rgba ： r = red g = green b = blue a = alpha 
		如：opacity：0.6；filter：alpha（opacity = 60）

十、table标签当中border-color属性设置无效

解决方法：运用CSS样式进行控制，而不是使用属性进行样式的处理

十一、a标签hover不适用于所有标签，只支持a标签的使用

解决方法：合理用a标签嵌套其他行内标签或者用javascript模拟a的hover效果，详情请查看日志：兼容IE6 a标签hover效果

十二、img外部的border img外部有a标签，即img标签有链接时

解决方法：设置img边框border：0

十三、横向双倍外边距，IE6中块元素浮动后，会出现横向双倍margin现象

解决方法：在float标签的样式控制中加入display：inline

未完待续…