各种浏览器css兼容性问题

为什么浏览器会存在兼容问题？

同一浏览器，版本越老，存在bug越多，相对于版本越新的浏览器，对新属性和标签、新特性支持越少。

不同浏览器，核心技术不同，标准不同，实现方式也有差异，最终呈现出来在大众面前的效果也是会有差异。

浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同

解决方案：CSS里    *{margin:0;padding:0;}

浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

浏览器兼容问题三：设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

解决方案：在display:block;后面加入display:inline;display:table;

浏览器兼容问题五：图片默认有间距

解决方案：使用float属性为img布局

浏览器兼容问题七：透明度的兼容CSS设置

问题症状：IE6,7,8不支持rgba与opacity两种透明的设置方法；

解决方案：使用IE6当中的滤镜filter替代掉，如：opacity:0.6;filter:alpha(opacity=60)。

浏览器兼容问题八：img外部的border

解决方案：设置img边框border:0;

浏览器兼容问题九：子选择器在IE6中不能使用

解决方案：采用其他选择器或者后代选择器进行控制。

浏览器兼容问题十：input聚焦框颜色与样式不同

解决方案：使用outline：none，清除默认样式之后再统一设置。

1.双边距BUG float引起的  使用display

2.3像素问题 使用float引起的 使用dislpay:inline -3px

3.超链接hover 点击后失效  使用正确的书写顺序 link vis8ited hover active

4.IEz-index问题 给父级添加position:relative

5.Png 透明 使用js代码 改

6.Min-height 最小高度 ！Important 解决’

7.select 在ie6下遮盖 使用iframe嵌套

8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

9.IE5-8不支持opacity，解决办法：

.opacity {

opacity: 0.4

filter: alpha(opacity=60); /* for IE5-7 */

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/

}

10. IE6不支持PNG透明背景，解决办法: IE6下使用gif图片