web浏览器兼容简要整理

ajax的创建

        if (window.XMLHttpRequest) {
            var xhr = new XMLHttpRequest();
        } else {                                               //IE6及其以下版本浏览器
            var xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
        }

事件监听

// target:监听对象
// type:监听函数类型,如click,mouseover
// func:监听函数

function addEventHandler(target,type,fn){


 if(target.addEventListener){

  //IE9,谷歌和火狐

  target.addEventListener(type, fn, false);

 }else if(target.attachEvent){

  target.attachEvent("on" + type, fn);

 }else{

  target["on" + type] = fn;

 }


function removeEventHandler(target, type, fn) {       //移除


 if (target.removeEventListener){


  //IE9,谷歌和火狐


  target.removeEventListener(type, fn, false);


 } else if (target.detachEvent){


  target.detachEvent("on" + type, fn);


 }else {


  delete target["on" + type];


 

e||window.event

//阻止默认事件

function onclick (e){

var e=e||window.event

e.preventDefault();

}

//阻止冒

function stopPropagation(e) {

e = e || window.event;

if(e.stopPropagation) { //W3C阻止冒泡方法

e.stopPropagation();

} else {

e.cancelBubble = true; //IE阻止冒泡方法

}

}


    var e = e || window.event;
    var target = e.target || e.srcElement;//标准和Ie写法   //事件源:被操作的那个元素
    target.nodeName
    CSS

我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样式,

我们把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack.

CSS hack主要有三种:IE条件注释法、CSS属性前缀法、选择器前缀法。

(1)IE条件注释法,即在正常代码之外添加判别IE浏览器或对应版本的条件注释,符合条件的浏览器或者版本号才回执行里边的代码。

<!--  lt是小于 gt是大于 lte是小于等于 gte是不小于 !是不等于 -->
<!-- [if IE]>
	你想要执行的代码
<![endif]-->
<!-- [if lt IE 8]>
	你想要执行的代码
<![endif]-->
<!-- [if ! IE 8]>
	你想要执行的代码
<![endif]-->
(2)CSS属性前缀法,即是给css的属性添加前缀。比如 * 可以被IE6/IE7识别,但 _ 只能被IE6识别,IE6-IE10都可以识别 "\9",IE6不能识别!important  FireFox不能识别 * _  \9

(3)选择器前缀法。
IE6 *div{color:red;}
IE7 *+div{color:red;}

CSS reset浏览器对标签的默认支持不同,所以我们要统一,就要进行CSS reset。 最简单的初始化方法是 *{margin:0; padding:0;} 但不推荐,而且它也并不完善。
 


时间: 2024-10-13 11:40:32

web浏览器兼容简要整理的相关文章

[转]JAVA WEB 浏览器兼容问题汇总

首 先谈一下浏览器,虽然现在ie依然是浏览器市场的老大,大约占有67%的份额,但是由于其各方面的欠缺,用户开始选择其他浏览器作为自己浏览网页的主要 工具,比如firefox.theworld.maxthon.chrome.opera等等,在用户使用比较多的浏览器中,分为2大派系 - ie内核和非ie内核,像theworld.maxthon.greenbrower等等都属于ie内核,而firefox.chrome.opera则 为非ie内核,众多的浏览器使我们的web程序就出现了兼容问题,像ie就

【转】Web前端浏览器兼容初探

原文地址:http://blog.jobbole.com/38638/ 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 1 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端一起搞的同学,小生2年前就这种状态,鼓励人家用ie6....) 2 我要遵循标准,我只要ff就好,IE就是坑爹的玩意,我不必去理他(小生一年前的心态...) 现在看来,之前的想法都是不对的,我们诚然应该追求最新的浏览器使用

[转]Web前端浏览器兼容

转自: http://www.admin10000.com/document/1900.html 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 1 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端一起搞的同学,小生2年前就这种状态,鼓励人家用ie6....) 2 我要遵循标准,我只要ff就好,IE就是坑爹的玩意,我不必去理他(小生一年前的心态...) 现在看来,之前的想法都是不对的,我们诚

Web前端浏览器兼容初探

提示:喜欢前端及设计的话,请多关注 设计师零张,微博地址:weibo.com/510zhang 个人网站地址:http://www.0zhang.com/ 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 1 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端一起搞的同学,小生2年前就这种状态,鼓励人家用ie6....) 2 我要遵循标准,我只要ff就好,IE就是坑爹的玩意,我不必去理他(小生一

浏览器兼容杂项--待整理

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS里    * 备注:这个是最常

Flex Web部分浏览器兼容问题解决

今天找了一天这个项目的兼容性的问题,好在功夫不负有心人啊,都解决了 照理来说Flex应该没什么兼容性的问题的,但是我做的这个web应用却是有那么几个问题,在IE8内核的电脑上会出现,部分360浏览器也是 第一个问题: Flex页面显示不全,由于在我的应用中需要的面积比较大,所以没有用自适应大小,设了minWidth="1000" minHeight="710"这两个属性 但是在360等浏览器中由于页面可见高度只有610左右,所以剩下的就显示不出来了,如下图空白区:

浅谈Web前端浏览器兼容问题

对于兼容最近一直困扰我,以前写的代码只是针对高质量用户来使用 不考虑IE7,8 这样的浏览器 ,但是最近我开发的时候必须要兼容,大喊一声我曹,没有办法,自己来吧! 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第

WEB前端开发人员须知的常见浏览器兼容问题及解决技巧

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题.在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都是浏览器的

web前端~~浏览器兼容问题(百度)

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同    问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大.    解决方案:css里    *{margin:0;pad