浏览器兼容性

兼容性

1.儿子选择器

IE7开始兼容，IE6不兼容。

1 div>p{ 2  color:red; 3 }

div的儿子p。和div的后代p的截然不同。

能够选择：

1  <div> 2  <p>我是div的儿子</p> 3  </div>

不能选择：

1  <div> 2  <ul> 3  <li> 4  <p>我是div的重孙子</p> 5  </li> 6  </ul> 7  </div>

 

2.序选择器

IE8开始兼容；IE6、7都不兼容

 

选择第1个li：

1  <style type="text/css"> 2  ul li:first-child{ 3  color:red; 4  } 5  </style>

 

选择最后一个1i：

1  ul li:last-child{ 2  color:blue; 3  }

如果要求兼容IE6、7，那么就要自己写类名：

1  <ul> 2  <li class="first">项目</li> 3  <li>项目</li> 4  <li>项目</li> 5  <li>项目</li> 6  <li>项目</li> 7  <li>项目</li> 8  <li>项目</li> 9  <li>项目</li> 10  <li>项目</li> 11  <li class="last">项目</li> 12  </ul>

用类选择器来选择第一个或者最后一个：

1  ul li.first{ 2  color:red; 3  } 4  5  ul li.last{ 6  color:blue; 7  }

 

3.下一个兄弟选择器

IE7开始兼容，IE6不兼容。

+表示选择下一个兄弟

1  <style type="text/css"> 2  h3+p{ 3  color:red; 4  } 5  </style>

选择上的是h3元素后面紧挨着的第一个兄弟。

1     <h3>我是一个标题</h3> 2  <p>我是一个段落</p> 3  <p>我是一个段落</p> 4  <p>我是一个段落</p> 5  <h3>我是一个标题</h3> 6  <p>我是一个段落</p> 7  <p>我是一个段落</p> 8  <p>我是一个段落</p> 9  <h3>我是一个标题</h3> 10  <p>我是一个段落</p> 11  <p>我是一个段落</p> 12  <p>我是一个段落</p> 13  <h3>我是一个标题</h3>

4.

说IE6层面兼容的： 标签选择器、id选择器、类选择器、后代、交集选择器、并集选择器、通配符。

1 p 2 #box 3 .spec 4 div p 5 div.spec 6 div,p 7 *

IE7能够兼容的：儿子选择器、下一个兄弟选择器

1 div>p 2 h3+p

IE8能够兼容的：

1 ul li:first-child 2 ul li:last-child

 

5.

第一，IE6，不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大

解决办法很简单，就是将盒子的字号，设置小（小于盒子的高），比如0px。

1 height: 4px; 2 _font-size: 0px;

 

给css属性之前，加上下划线，这个属性就是IE6认识的专有属性。

比如：

1 _background-color: green;

 

解决微型盒子，正确写法：

1 height: 10px; 2 _font-size:0;

 

第二，IE6不支持用overflow:hidden;来清除浮动的

解决办法，以毒攻毒。追加一条

1 _zoom:1;

 

完整写法：

1 overflow: hidden; 2 _zoom:1;

两个IE6的兼容问题，都是通过多写一条hack来解决的。

这个我们称为伴生属性。

1 height:6px; 2 _font-size:0;

 

1 overflow:hidden; 2 _zoom:1;

 

overflow:hidden;的本意，就是溢出盒子的border的东西隐藏，这个功能是IE6兼容的。不兼容的是overflow:hidden;清除浮动的时候。

 

6.关于margin的IE6兼容问题

IE6双倍margin bug

当出现连续浮动的元素，携带和浮动方向相同的margin时，队首的元素，会双倍marign。

13  <ul> 14  <li></li> 15  <li></li> 16  <li></li> 17  </ul>

解决方案：

1）使浮动的方向和margin的方向，相反。

所以，你就会发现，我们特别喜欢，浮动的方向和margin的方向相反。并且，前端开发工程师，把这个当做习惯了。

8  float: left; 9  margin-right: 40px;

 

2）使用hack

单独给队首的元素，写一个一半的margin

6 <li class="no1"></li>

 

14 ul li.no1{ 15  _margin-left:20px; 16 }

 

7.z-index

● z-index值表示谁压着谁。数值大的压盖住数值小的。

● 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。

● z-index值没有单位，就是一个正整数。默认的z-index值是0。

● 如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。

● 从父现象

 

8.访问节点  

  getElementById()   id 访问节点

  getElementsByTagName()    标签访问节点

  getElementsByClassName()   类名    有兼容性问题

  主流浏览器支持     ie 67 8  不认识   就要封装自己的类

9.兄弟节点

nextSibling  下一个兄弟    亲的       ie 678认识

nextElementSibling   其他浏览器认识的     

previousSibling   同理  上一个兄弟   

previousElementSibling

我们想要兼容    我们可以合写 ||

必须先写 正常浏览器  后写  ie678  

 

10.子节点 

firstChild    第一个孩子  ie678

firstElementChild  第一个孩子   正常浏览器  

var one.firstElementChild || one.firstChild;   

lastChild

lastElementChild

 

11.孩子节点

childNodes    选出全部的孩子

childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点     （嫡出）

火狐 谷歌等高本版会把换行也看做是子节点

利用  nodeType == 1 时才是元素节点     来获取元素节点

children   重要  选取所有的孩子 （只有元素节点）

ie 678  包含 注释节点     这个要避免开。

 

12.事件对象

我们学过一些事件 :   onmouseover   onmouseout    onclick .....

btn.onclick = function(event) {  语句 }

event  就是事件的对象    指向的是 事件  是   onclick  

再触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。

比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。

普通浏览器支持 event  

ie 678 支持 window.event

所以采取兼容性的写法 ：

  varevent =event ||window.event;

 

13.pageX  clientX  screenX 区别

 screen X   screenY   

 是以我们的电脑屏幕 为基准点   测量

pageX  pageY   

以我们的  文档   （绝对定位）  的基准点对齐    ie678 不认识    

clientX   clientY

以 可视区域为基准点   类似于    固定定位  

 

14.scrollTop

页面滚动效果  

window.onscroll = function() { 页面滚动语句  }

谷歌浏览器 和没有声明 DTD  <DOCTYPE >：  

  document.body.scrollTop;  

火狐 和其他浏览器   

  document.documentElement.scrollTop;

 ie9+  和 最新浏览器   都认识

  window.pageXOffset;     pageYOffset  （scrollTop）

 兼容性写法：  

 

1  var scrollTop = window.pageYOffset || document.documentElement.scrollTop

2         || document.body.scrollTop || 0;

 

15.检测屏幕宽度(可视区域)

ie9及其以上的版本

window.innerWidth  

标准模式

document.documentElement.clientWidth

怪异模式

document.body.clientWidth

 

16.事件冒泡

顺序

E 6.0:

div -> body -> html -> document

其他浏览器:

div -> body -> html -> document -> window

不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload

 

17.阻止冒泡的方法

if(event && event.stopPropagation){
    event.stopPropagation();
}else{
    event.cancelBubble = "true";
}

 

18.判断当前对象

var eventTarget = event.target ? event.target.id : event.srcElement.id;

 

19.获得用户选择内容

if(window.getSelection){
    txt = window.getSelection().toString();
}else{
    txt = document.selection.createRange().text;
}