Web浏览器兼容性整理

最新推荐文章于 2024-04-21 22:53:42 发布

Carefree1990

最新推荐文章于 2024-04-21 22:53:42 发布

阅读量133

点赞数

文档类型定义（DTD）

浏览器会有几种工作模式，而DTD里面包含了文档的规则，浏览器会根据文档定义的DTD来解释页面的标识，并展现出来。换句话说, DTD告诉浏览器工作在不同的模式下。

DOCTYPE是document type(文档类型)的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。

DOCTYPE声明对于建立符合标准的网页是必不可少的关键组成部分；如果DOCTYPE不正确，标识和CSS都不会生效。

DTD分类:

过渡的(Transitional)：是要求非常宽松的DTD。一般的情况下网页中会使用此DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml 的写法)。
```
 
```
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
严格的(Strict)：要求严格的DTD。对页面的标签使用非常严格，页面里几乎不准使用 inline-style 的 CSS 样式。
```
 
```
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
框架的(Frameset)：专门针对框架页面设计使用的DTD。以前Table 满街走的年代很流行这种DTD，如果你的页面中包含有框架，需要采用这种DTD。
```
 
```
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
适用于手机浏览器的DTD：用于移动端开发。
```
 
```
1. <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
2. "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

怎么选择DOCTYPE?

理想情况当然是严格的DTD，但对于大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。

注：上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag。例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的，而不是用来实现表现形式，我们过渡的目的是最终实现数据和表现相分离。

判断页面有没有DTD (compated属性问题)

document.compatMode === "BackCompat"
BackCompat 未声明的返回值
CSS1Compat 已经声明的返回值

1. 事件对象

获取事件对象 event。
```
 
```
1. W3C火狐谷歌 : event 或者在事件绑定的函数中加参，这个参数就是event.
2. IE6、7、8 支持： window.event（不支持带参）
4. function (event){
5. var event = event || window.event;
6. // 对事件进行操作
7. }
获取事件的目标 target。
```
 
```
1. W3C 浏览器: event.target
2. IE6、7、8 : event.srcElement
3. 兼容写法:
4. var target = event.target || event.srcElement;
5. var target = event.target? event.target: event.srcElement;

2. 获取屏幕可视区的宽高

W3C 规定 : window.innerWidth 和 window.innerHeight
谷歌支持声明DTD : window.documentElement.clientWidth 和 window.documentElement.clientHeight
IE支持未声明DTD : window.body.clientWidth 和 window.body.clientHeight
兼容写法:
function client(){
if(window.innerHeight !== undefined){ // 如果浏览器支持innerHeight属性
return {
"width" : window.innerWidth,
"height": window.innerHeight
}
}else if( document.compatMode === "CSS1Compat"){ // 如果浏览器声明了DTD
return {
"width" : window.documentElement.clientWidth,
"height": window.documentElement.clientHeight
}
}else{
return {
"width" : window.body.clientWidth,
"height": window.body.clientHeight
}
}
}

3. 获取被卷曲的部分

function scroll(){
if( window.pageYOffset !== undefined){
return {
"top" : window.pageYOffset ,
"left": window.pageXOffset
}
}else if( document.compatMode ==="CSS1Compat"){
return {
"top" : window.documentElement.scrollTop ,
"left": window.documentElement.scrollLeft
}
}else{
return {
"top" : window.body.scrollTop,
"left": window.body.scrollLeft
}
}
}
或者简写:
function scroll(){
/*
* 如果这个属性存在,那么返回值应该在 0 ~ 无穷大;
* 如果没有, 返回值则是 undefined.
* 只要判断不是undefined 就可以调用此方法.
*/
if(window.pageYOffset !== undefined){
return{
"top" : window.pageYOffset || documnet.body.scrollTop || documnet.documentElement.scrollTop;
"left" : window.pageXOffset || documnet.body.scrollLeft || documnet.documentElement.scrollLeft;
}
}
}

4. 光标在页面中的位置

pageX 和 pageY 兼容性不好。
兼容写法:
鼠标在页面中的位置 = 被卷曲的部分 + 可视区部分。
pagex = event.pageX || scroll().left + event.clientX;
pagey = event.pageY || scroll().top + event.clientY;

5.取消/阻止事件冒泡

不冒泡的事件有: blur 、focus、load、unload、onmouseenter、onmouseleave

判断事件是否冒泡 : event. bubbles 属性

document.onclick = function(event){
event = event || window.event;
console.log( event.bubbles);
// 返回true则说明事件冒泡;否则不冒泡。
}

取消/阻止事件冒泡:

W3C浏览器: 通过stopPropagation()方法阻止冒泡
IE6、7、8: 通过cancelBubble属性控制是否阻止冒泡
document.onmouseenter = function(event){
var event = event || window.event;
if( event && event.cancelBubble){
event.cancelBubble = true;
}else{
event.stopPropagation();
}
}

6.跨浏览器的事件处理程序

使用EventUtil对象来处理浏览器间的差异性。

var EventUtil = {
addHandler : function(element, type, handler){
if ( element.addEventListener){
element.addEventListener(type, handler, false);
}else if( element.attachEvent){
element.attachEvent("on" + type , handler);
} else{
element["on"+type] = handler;
}
},
removeHandler : function(element, type, handler){
if( element.removeEventListener){
element.removeEventListener(type, handler, false);
}else if(element.detachEvent){
element.detachEvent("on"+type, handler);
}else{
element["on"+type] = null;
}
}
}

7.跨浏览器的事件对象

var EventUtil = {
addHandler: function( element, type, handler){},
getEvent: function(event){
return event?event: window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
},
preventDefault : function(event){
if( event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
removeHandler: function( element, type, handler){},
stopPropagation: function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
}

8.鼠标滚轮事件

W3C浏览器: mousewheel 属性event.wheelDelta >0向上滚动
Foirefox: DOMMouseScroll 属性event.detail <0 向上滚动
JQuery中: event.originalEvent.wheelDelta就是指向原始的事件对象。
JQuery中兼容写法:
$(document).on("mousewheel DOMMouseScroll", function (e) {
var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));
//var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0); //合并写法
if (delta > 0) {
// 向上滚
console.log("wheelup");
} else if (delta < 0) {
// 向下滚
console.log("wheeldown");
}
});
判断Firefox：(除了使用userAgent属性)
if( document.mozHidde != undefined){
//此为firefox
}