浏览器常见兼容问题

浏览器常见兼容问题:

• 在任何标签中插入图片时，图片会将元素下方撑大三像素（有可能是>3像素）

   解决方法: 
         给<img>添加声明：display:block;
         给img添加声明 :vertical-align:top/middle;
  

• 当图片（所有的行内元素和行内块元素）横着排的时候，水平之间存在一定的间距(这个间距是浏览器识别换行时 识别的缝隙)

   解决方法:
         img{float:left;}
          将<div>与<img>写在一行上
  

• 图片添加上超链接之后，在IE上有边框

       解决方法:
              给img的边写成0；
                      img{border:0;}
  

• 表单元素距离顶部间距不一致(各大浏览器 IE, 火狐,谷歌等)

     解决方法:
          给表单元素添加声明：float:left;
  

• cursor属性的hand属性值只有IE9以下浏览器识别

     解决方法:
         如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer;
  

• 子元素没设置任何浮动，设置了margin-top属性后，会错误的把margin-top的属性值添加给父元素

       解决方法:
              给父元素添加overflow:hidden；
              给父元素添加上边框 border-top
              父元素或者子元素浮动
  

• margin的外边距重叠

      解决方法:
          给其中的一个元素添加父元素，并且添加声明overflow：hidden；
  

• 字体不统一

       解决方法:
           设置字体font-family:"宋体";
  

• input中 type=“text”,文本框里面的内容垂直不居中,在IE8以下低版本垂直靠上对齐

        解决方法:
                给input添加line-height
  

• 给input用placeholder做提示信息的时候,IE9以下识别不了

        解决方法:
            可以用value书写提示信息
  

• 在低版本上,有的标签有默认高度,常见标签里面是li有默认高度

      解决方法:给li设置height:0; 不仅要给li设置,也要给ul 设置
  

过滤器

IE的过滤器,过滤器的目的是希望在执行某个css代码的时候,只让符合规则的浏览器执行该代码,其他浏览器不解析该代码.

      !important过滤器 
           对于IE6来说是不识别的,对于其他浏览器是识别的,对于其他浏览器来说该过滤器可以加大执行属性的权重,且是最大权重,比行内样式的权重还要大
       用法:加在属性最后面
        即:
              div{
                   background:url(images.jpg) no-repeat !important;
                   }

      _过滤器 对于IE6识别 语法:  
      div{
          _width:200px;
      }
      直接在属性前面加_

      *过滤器 或 +过滤器 对IE7及以下识别
      在属性前面加*
      div{
          *width:200px;
          +width:200px;
      }

      \9 对于IE10及以下的浏览器识别 
      div{
        width:200px\9;
      }

      \0 对于IE8以下的浏览器不识别且其他浏览器也不识别,能识别IE8到IE11
      div{
        width:200px\0;
      }