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 相关文章推荐
javascrip关于继承的小例子
May 10 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
删除javascript中注释语句的正则表达式
Jun 11 Javascript
javascript求日期差的方法
Mar 02 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
layui之select的option叠加问题的解决方法
Mar 08 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
将RGB值转换为灰度值的简单算法
Oct 09 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像数组一样存取和修改字符串字符
2014/03/21 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
农村婚礼主持词
2014/03/13 职场文书
学历公证委托书
2014/04/09 职场文书
2014年综治宣传月活动总结
2014/04/28 职场文书
团代会闭幕词
2015/01/28 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript