浏览器兼容问题产生的原因及解决方法

html兼容性问题

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

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

<!--if lt IE 9]>　　<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>　　<![endif]-->

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

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

  1. (方式一)使用input的value作为显示文本，模拟灰色样式，focus让$("[placeholder]").val()=="",blur时$("[placeholder]").val(this.defaultValue)；
  2. (方式二)不使用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背景颜色属性值进行转化，有相应的网页实现功能

  1. .transparent_class {   
  2.       filter:alpha(opacity=50);   
  3.       -moz-opacity:0.5;   
  4.       -khtml-opacity: 0.5;   
  5.       opacity: 0.5;   
  6. } 

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是这么做的），比如：

1
2
3
4
5
6
7
8
9
.parent{width:100px;}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
.clear{clear:both;margin:0;parding0;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” 即可，屡试不爽。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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就搞定。举例：

 
1
2
3
4
5
6
7
.parent{width:100px;overflow:auto}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
<div class="parent">
   <div class="son1"></div>
   <div class="son2"></div>
</div>
 

13.溢出文本显示为省略号    text-overflow:ellipsis; white-space:nowrap; overflow:hidden;

原因：text-overflow 还只是ie的私有属性，存在兼容性问题，低版本FF（FF7以下）不支持该属性

posted @ 2016-12-20 17:12  hyt前端小菜鸟  阅读(2250)  评论(0)  编辑  收藏  举报