浏览器兼容问题产生的原因及解决方法
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】低版本浏览器下不兼容问题:
- (方式一)使用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是这么做的),比如:
1
2
3
4
5
6
7
8
9
|
.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” 即可,屡试不爽。
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 } .son 1 { float : left ; width : 20px ;} .son 2 { 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以下)不支持该属性