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 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
jquery 查找select ,并触发事件的实现代码
Mar 30 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
javascript如何使用bind指定接收者
May 04 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
vue-cli构建项目使用 less的方法
Oct 04 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中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
PHP+MySQL插入操作实例
2015/01/21 PHP
PHP Reflection API详解
2015/05/12 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
JavaScript 参考教程
2006/12/29 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
Python获取当前时间的方法
2014/01/14 Python
Python遍历目录的4种方法实例介绍
2015/04/13 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
会计电算化专业应届大学生求职信
2013/10/22 职场文书
人事行政主管岗位职责
2013/12/22 职场文书
村干部承诺书
2014/03/28 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
工会工作个人总结
2015/03/03 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python