页面开发中遇到的兼容问题

1，margin 加倍的问题：

    设置了float的div在ie浏览器下设置的margin会加倍。解决的办法：在float的div上面加上display:inline.

2，清除浮动问题:

　 这个问题还是挺简单的，知道一点就好。哪里用了浮动，哪里的上级就清除浮动，目前我还没发现这么用会有问题。下面是代码例子：

<ul class="cf">
      <li class="fl"></li>
      <li class="fl"></li>
      <li class="fr"></li>
</ul>

<style>
    .fl{float:left;}
    .fr{float:right;}
    .cf{zoom:1;}
    .cf:after{display:table;clear:both;content:"";overflow:hidden;}
</style>

3，display:inline-block引起的间隙问题：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

解决代码：
ul{font-size:0;}
li{fotn-size:16px;display:inline-block;}

解释：设置了display:inline-block后，相邻的li会有空白的间隙，这是由inline-block引起的。解决的办法如上面的代码所示。还有个办法就是把li都写在一行内，不要有间隙。

4，FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式。

div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：
div{maring:30px;margin:28px}

 5，当<img>标签在一个<a>标签内部时，因为会在IE8/IE9中出现默认的border,所以需要重置<img>标签的border样式。

img{
   border:0;
}

 6.解决ie8不支持background-position问题。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='images/login.png',sizingMethod='scale');


这段代码加到写background-size的样式里面，图片地址改为自己图片的地址就可以。