常用的兼容解决法

常用的兼容解决法

我们已经知道的兼容性问题有哪些呢？

ajax xmlhttprequest对象的获得
绑定事件
event对象的获得
CSS最终样式的获取

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

问题症状：

随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

碰到频率:

100%

解决方案：

CSS里 * {margin:0;padding:0;}

备注：

这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

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

<div id="first"></div>
  #first{
            background-color: red;
            width: 200px;
            height: 200px;
            float: left;
            margin-left: 100px;
            display: inline;
        }

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

问题症状：

IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度

碰到频率：

60%

解决方案：

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

    #first{
            background-color: red;
            width: 200px;
            height: 10px;
            overflow: hidden;
        }

<div id="first"></div>

4：
几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

使用float属性为img布局

<img src="images/20664369-1_b.jpg" alt="" class="img">
<img src="images/20670230-1_b.jpg" alt="" class="img">
<img src="images/20679764-1_b.jpg" alt="" class="img">

 .img{
            background-color: red;
            float: left;
        }

5：ie6 不支持 fixed 这个东西，所以我们的该怎么做呢？

目前解决的方案：用js写兼容

6：关于手形光标. cursor: pointer. 而hand 只适用于 IE.

少用hand;

7：浮动ie产生的双倍距离

#box{ width: 200px;
        height: 200px;
            background-color: red;
            float:left; width:100px; margin:0 0 0 100px;}

<div id="box"></div>   

解决方案：display: inline—/使浮动忽略

8：ie7,ie8,firefox,chrome等高端浏览器下，已经可以识别 !important属性，但是Ie6是不行的

  #colortest
        {border:20px solid #60A179 !important;
            border:20px solid #00F;
            padding: 30px;
            width : 300px;}

<div id="colortest"></div>

这里有个新的东西if ie

  <style type="text/css">
        #colortest
        {width: 100px;height: 100px;background-color: red}
    </style>
    <!--[if IE]>
    <style type="text/css">
        #colortest
        {width: 100px;height: 100px;background-color: blue}
    </style>
    <![endif]-->

<div id="colortest"></div>   

可以判断当前浏览器是否为ie浏览器

跨域道具：http://www.suidao.in/invi/gvbadn