浏览器兼容问题产生的原因及解决方法-优快云博客

本文详细介绍了HTML5和CSS3在不同版本浏览器中的兼容性问题及其解决方法，包括html5shiv.js的使用、placeholder属性的兼容处理、IE10及以上版本滤镜替代方案等。

html兼容性问题

兼容原因：高版本浏览器用了低版本浏览器无法识别的元素，导致其不能解析

解决方法：使用html5shiv.js使IE支持html5新增的标签，在head中

详见：http://jingyan.baidu.com/article/8275fc8662ac2b46a13cf65a.html

解决html5新标签【placeholder】低版本浏览器下不兼容问题:

(方式一)使用input的value作为显示文本，模拟灰色样式，focus让$("[placeholder]").val()=="",blur时$("[placeholder]").val(this.defaultValue)；
(方式二)不使用value，添加一个额外的标签（span）到body里然后绝对定位覆盖到input上面,第二种方法详情看下：

首先，判断当前浏览器是否支持placeholder属性：

1 function placeholderSupport() {
2     return 'placeholder' in document.createElement('input'); 3 }

上关键代码：

/*
*placeholder兼容ie9以下 author：高丰鸣 add 2016-1-27
*/
$(function(){ if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder $(document).ready(function(){ //默认遍历循环添加placeholder $('[placeholder]').each(function(){ $(this).parent().append("<span class='placeholder'>"+$(this).attr('placeholder')+"</span>"); }) $('[placeholder]').blur(function(){ if($(this).val()!=""){ //如果当前值不为空，隐藏placeholder $(this).parent().find('span.placeholder').hide(); } else{ $(this).parent().find('span.placeholder').show(); } }) }); } });

css兼容性问题

1.IE10 以上不支持滤镜的使用

原因：在IE10中，已经采用HTML5标准[1]，DX Filters和VML分别用SVG和CSS3代替。

解决方法：http://www.cnblogs.com/fsjohnhuang/p/4127888.html

2.IE6及以下不支持固定定位

　　IE6、IE7（quirk模式）、IE8（quirk模式）浏览器将 'position' 特性的 fixed 值当作错误值处理。从而导致使用固定定位的元素使用 'position' 的默认值 static。即这个元素在此时变成了普通流中的元素，这必然会导致布局错位等问题。

　　解决方案： 　　

　　在 IE6、IE7（quirk模式）、IE8（quirk模式）中为固定定位元素设置 '_position:absolute'，再通过 JavaScript 脚本或者 CSS Expression 动态设置其偏移量，但是我发现只能实现在最底部和最顶部固定。要想设置具体的位置还需要配合_margin。

　　使元素固定在浏览器的顶部：#top { _position: absolute; _bottom: auto;

　　　　　　　　　　　　　　　　　　 _top: expression(eval(document.documentElement.scrollTop)); }

　　使元素固定在浏览器的底部：#bottom { _position: absolute; _bottom: auto;
　　　　　　　　　　　　　　　　　　　　_top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); }

　　　其他位置：_margin修改其中的数值控制元素的位置。

附：去除滚动滚动条的时候会出现一闪一闪的情况
body { _background-attachment:fixed; _background-image:url(about:blank); }

3.IE8以下不支持css3

解决方法：参见：http://www.zhangxinxu.com/wordpress/?p=783

4.button在高度计算上始终使用了Quirks模式（即边框的计算事在元素的宽度内的）text则不包含边框高度

5.IE7 下浮动不当引起位置改变

解决方法：同级子元素若其中一个有浮动，最好同级其他元素也加上浮动，不会造成错位。

6.IE7下，定位引起位置的改变，造成位置的移动

解决方法：同级子元素若其中一个有定位，最好同级其他元素也加上定位，不会造成错位。综合5，6，附：同级元素下有定位或浮动，最好其他元素均加上浮动或定位，以免在IE中引起位置的改变。

7.当line-height小于字体大小时，IE7及以下会出现文字截取的异常。解决方法：暂定位，将line-height设定大于字体大小，height尽量大于字体大小，以免字体被截取。

8.图片默认有间距（几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。）解决方法：用float去掉这个边距。

9.对于透明，各浏览器兼容都不同

解决方法：css背景颜色属性值进行转化，有相应的网页实现功能

.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

10.select标签在各个版本上的文字垂直不居中解决方法：ie8 和FF中可通过添加padding：8px 0;解决,已测验

其余浏览器具体参见 http://blog.163.com/zx_1258/blog/static/133233799201331294157506/

11.transparent IE8及以下不支持。

所以css3制作的小三角形IE8及以下不支持，最好用图片代替小三角形

12.FLOAT闭合（clearing float）

解决办法：

1) 给父DIV也设上float

2) 在所有子DIV后新加一个空DIV（目前Ext是这么做的），比如：

 
    
          .parent{
          width
          :
          100px
          ;}
         

          .son
          1
          {
          float
          :
          left
          ;
          width
          :
          20px
          ;}
         

          .son
          2
          {
          float
          :
          left
          ;
          width
          :
          80px
          ;}
         

          .clear{
          clear
          :
          both
          ;
          margin
          :
          0
          ;parding
          0
          ;
          height
          :
          0px
          ;
          font-size
          :
          0px
          ;}
         

          <div class=
          "parent"
          >
         

             
          <div class=
          "son1"
          ></div>
         

             
          <div class=
          "son2"
          ></div>
         

             
          <div class=
          "clear"
          ></div>
         

          </div>
         

   

3) 万能 float 闭合将以下代码加入Global CSS 中，给需要闭合的div加上 class=”clearfix” 即可，屡试不爽。

 
          <style>
         
          /* Clear Fix */
         
          .clearfix:after {
         
          content
          :
          "."
          ;
         
          display
          :
          block
          ;
         
          height
          :
          0
          ;
         
          clear
          :
          both
          ;
         
          visibility
          :
          hidden
          ;
         
          }
         
          .clearfix {
         
          display
          :inline-
          block
          ;
         
          }
         
          /* Hide from IE Mac \*/
         
          .clearfix {
          display
          :
          block
          ;}
         
          /* End hide from IE Mac */
         
          /* end of clearfix */
         
          </style>

:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦。

4) overflow:auto 只要在父DIV的CSS中加上overflow:auto就搞定。举例：

       .parent{
       width
       :
       100px
       ;
       overflow
       :
       auto
       }
      

       .son
       1
       {
       float
       :
       left
       ;
       width
       :
       20px
       ;}
      

       .son
       2
       {
       float
       :
       left
       ;
       width
       :
       80px
       ;}
      

       <div class=
       "parent"
       >
      

          
       <div class=
       "son1"
       ></div>
      

          
       <div class=
       "son2"
       ></div>
      

       </div>
      

        
      