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 相关文章推荐
jquery tools 系列 scrollable学习
Sep 06 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
javascript 数组操作详解
Jan 29 Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 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 操作符与控制结构
2012/03/07 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
JavaScript面向对象编程
2008/03/02 Javascript
ext监听事件方法[初级篇]
2008/04/27 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
vuejs如何配置less
2017/04/25 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
浅谈python中真正关闭socket的方法
2018/12/18 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
怎么处理XML的中文问题
2015/03/26 面试题
2014年客服工作总结范文
2014/11/13 职场文书
白鹤梁导游词
2015/02/06 职场文书
花木兰观后感
2015/06/10 职场文书
运动会5000米加油稿
2015/07/21 职场文书
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang