css与javascript跨浏览器兼容性总结


Posted in Javascript onSeptember 15, 2014

本文以大量实例形式总结了css与javascript跨浏览器的兼容性问题。分享给大家供大家参考。具体总结如下:

一、CSS样式兼容性

1. FLOAT闭合(clearing float)

网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合,这也是div无法自适应高度的一个原因。如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV,这种情况一般出现在一个父DIV下包含多个子DIV。解决办法:

1) 给父DIV也设上float

2) 在所有子DIV后新加一个空DIV(目前Ext是这么做的),比如:

.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” 即可,屡试不爽。

<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}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
<div class="parent">
   <div class="son1"></div>
   <div class="son2"></div>
</div>

原理是,外围元素之所以不能很好的延伸,问题出在了overflow上,因为overflow不可见(见W3C的解释)。现在只要将给外围元素添 加一个“overflow:auto”,就可以解决问题,结果是除了IE,真的可以解决。下来就要解决IE的问题了,再加上“_height:1%”,这个问题就完全解决了。我试了一下,其实不加"_height:1%“在IE下也行,留着吧。

 2.截字省略号

.hh {
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}

这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾。技术是好技术,很多人都喜欢乱用,但注意Firefox并不支持。

<meta http-equiv="x-ua-compatible" content="ie=7" />

页面加上这句就可以让页面兼容IE7了

供参考! 给大家提醒一个漂浮需要注意的问题 注意设置DIV宽和高 注意设置overflow:hidden; 注意闭合针对火狐 父div样式display:inline-block;

3.  cursor:hand和cursor:pointer

firefox不支持hand,但ie支持pointer
解决方法:统一使用pointer

4. CSS透明

几款浏览器对透明度的支持方式各不相同,为了保证在IE, Firefox, Chrome, Safari等主流浏览器下都能正常显示透明度的效果,我们可以定义一个透明度的class,因为一写就要写3条,省的每次都复制来复制去了。

具体代码如下:

.transparent{
filter:alpha(opacity=60); /*支持 IE 浏览器*/
-moz-opacity:0.6; /*支持 FireFox 浏览器*/
opacity:0.6; /*支持 Chrome, Opera, Safari 等浏览器*/
}

5.css中的width和padding

在IE7和FF中width宽度不包括padding,在Ie6中包括padding。

二、JavaScript兼容

1. children与childNodes

IE提供的children、childNodes和firefox下的childNodes的行为是有区别的,firefox下childNodes会把换行和空白字符都算作父节点的子节点,而IE的childNodes和children不会。比如:

<div id="dd">
<div>yizhu2000</div>
</div>

id为dd的div在IE下用childNodes查看,其子节点数为1,而ff下为三,我们可以从firefox的dom查看器里面看到他的childNodes为["\n ", div, "\n"]。

要在firefox下模拟children的属性我们可以这样做:

if (typeof(HTMLElement) != "undefined" && !window.opera) {
  HTMLElement.prototype.__defineGetter__("children", function() {
    for (var a = [], j = 0, n, i = 0; i < this.childNodes.length; i++) {
      n = this.childNodes[i];
      if (n.nodeType == 1) {
        a[j++] = n;
        if (n.name) {
          if (!a[n.name])
            a[n.name] = [];
          a[n.name][a[n.name].length] = n;
        }
        if (n.id)
          a[n.id] = n;
      }
    }
    return a;
  });
}

2. firefox和ie的事件

window.event只能在IE下使用,而不能用在Firefox下,这是因为Firefox的event只能在事件发生的现场使用。  Firefox必须从源处加入event作参数传递。IE忽略该参数,用window.event来读取该event。

比方说下面这个在ie下获得鼠标位置的方法:

<button onclick="onClick()" >获得鼠标点击横坐标</button>
<script type="text/javascript">
function onclick(){
alert(event.clientX);
}
</script>

需要改成

<button onclick="onClick(event)">获得OuterHTML</button>
<script type="text/javascript">
function onclick(event){
event = event || window.event;
alert(event.clientX);
}
</script>

才能在两种浏览器下使用

3.HTML对象获取问题

FireFox获取方式document.getElementById("idName")
ie使用document.idname或者document.getElementById("idName")
解决办法:统一使用document.getElementById("idName");

4. const问题

在Firefox下,可以使用const关键字或var关键字来定义常量;
IE下,只能使用var关键字来定义常量;
解决方法:统一使用var关键字来定义常量。

5.frame问题

以下面的frame为例:

<frame src="xxx.html" id="frameId" name="frameName" />

a)访问frame对象

IE:使用window.frameId或者window.frameName来访问这个frame对象,frameId和frameName可以同名;
Firefox:只能使用window.frameName来访问这个frame对象;
另外,在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象;

b) 切换frame内容

在 IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容;

如果需要将frame中的参数传回父窗口(注意不是opener,而是parent),可以在frame中使用parent来访问父窗口。例如:

parent.document.form1.filename.value="Aqing";

6. body问题

Firefox的body在body标签没有被浏览器完全读入之前就存在;而IE的body则必须在body标签被浏览器完全读入之后才存在;

7. firefox与IE的父元素(parentElement)的区别

IE:obj.parentElement

firefox:obj.parentNode

解决方法:因为firefox与IE都支持DOM,因此全部使用obj.parentNode

8.innerText的问题

innerText在IE中能正常工作,但是innerText在FireFox中却不行,需用textContent;

解决方法:

if (navigator.appName.indexOf("Explorer") > -1) {
  document.getElementById('element').innerText = "my text";
} else {
  document.getElementById('element').textContent = "my text";
}

9.AJAX获取XMLHTTP的区别

var xmlhttp;
if (window.XMLHttpRequest) {
  xmlhttp = new XMLHttpRequest();
} elseif (window.ActiveXObject) { // IE的获取方式
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

注意:在IE中,xmlhttp.send(content)方法的content可以为空,而firefox则不能为null,应该用send(""),否则会出现411错误。

希望本文所述对大家WEB程序设计有所帮助。

Javascript 相关文章推荐
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
jquery dialog键盘事件代码
Aug 01 Javascript
jQuery find和children方法使用
Jan 31 Javascript
图片onload事件触发问题解决方法
Jul 31 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
js实现继承的5种方式
Dec 01 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
three.js如何实现3D动态文字效果
Mar 03 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 #Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 #Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 #Javascript
javascript使用数组的push方法完成快速排序
Sep 15 #Javascript
一款由jquery实现的整屏切换特效
Sep 15 #Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 #Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 #Javascript
You might like
php生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
Bootstrap实现翻页效果
2017/11/27 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
python开发游戏的前期准备
2019/05/05 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
一年级班主任寄语
2014/01/19 职场文书
酒店员工职业生涯规划
2014/02/25 职场文书
2014年护士工作总结范文
2014/11/11 职场文书
2014年团支书工作总结
2014/11/14 职场文书
企业介绍信范文
2015/01/30 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
宾馆客房管理制度
2015/08/06 职场文书
React Fragment介绍与使用详解
2021/11/11 Javascript