CSS 中属性的兼容记载

1.IE7中 去除ul li前面的空格

   1.设置ul的 margin: 0px 0px 0px 0px;padding: 0px;

   2.设置li的  padding: 0px;

2.css设置div的最小高度

  #obj{
      min-height:500px;
     _height:500px;
   }

 1. min-height:500px这是针对IE7和FF的，因为IE6不支持min-height属性。

 2._height只有IE6才认识，对IE7和FF不起作用

3.css 设置最小宽度

    #obj{
     min-width:785px;
width:e xpression(document.body.clientWidth < 800 ? "785px" : "100%" );
   }

4.为兄弟节点添加事件

   1.新式浏览器

 1   window.onload = function () {
 2                     var orgs = document.getElementsByName("orgname");
 3                     for (i = 0; i < orgs.length; i++) {
 4                         orgs[i].onmouseover = function (event) {
 5                             e = event ? event : window.event;
 6                             t = e.target || e.srcElement;
 7                             var obj = this.nextElementSibling.nextElementSibling.nextElementSibling;
 8                             if (obj.style.display != "block") {
 9                                 obj.style.left = getPointerX(e) + "px";
10                                 obj.style.top = getPointerY(e) + "px";
11                                 obj.style.display = "block";
12                             }
13                         }
14                         orgs[i].onmouseout = function (event) {
15                             e = event ? event : window.event;
16                             t = e.target || e.srcElement;
17                             var obj = this.nextElementSibling.nextElementSibling.nextElementSibling;
18                             if (obj.style.display != "none") {
19                                 obj.style.left = getPointerX(e) + "px";
20                                 obj.style.top = getPointerY(e) + "px";
21                                 obj.style.display = "none";
22                             }
23                         }
24                     }
25                 }

 

  2.IE7，IE6 等浏览器

 1  function showdivmo(obj, event) {
 2             e = event ? event : window.event;
 3             t = e.target || e.srcElement;
 4             if (obj.nextElementSibling != null) {
 5                 var obj = obj.nextElementSibling.nextElementSibling.nextElementSibling;
 6             }
 7             else {
 8                 var obj = obj.nextSibling.nextSibling.nextSibling;
 9             }
10             if (obj.style.display != "block") {
11                 obj.style.left = getPointerX(e) + "px";
12                 obj.style.top = getPointerY(e) + "px";
13                 obj.style.display = "block";
14             }
15         }
16         function showdivout(obj, event) {
17             e = event ? event : window.event;
18             t = e.target || e.srcElement;
19             if (obj.nextElementSibling != null) {
20                 var obj = obj.nextElementSibling.nextElementSibling.nextElementSibling;
21             }
22             else {
23                 var obj = obj.nextSibling.nextSibling.nextSibling;
24             }
25             if (obj.style.display != "none") {
26                 obj.style.left = getPointerX(e) + "px";
27                 obj.style.top = getPointerY(e) + "px";
28                 obj.style.display = "none";
29             }
30         }

 

 3.得到鼠标位置的两个方法
      

1   function getPointerX(event) {
2       return event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
3     }
4   function getPointerY(event) {
5       return event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
6     }


4.注意新式浏览器和旧浏览器获取兄弟节点的区别

1 if (obj.nextElementSibling != null) 
2 {
3    var obj =obj.nextElementSibling.nextElementSibling.nextElementSibling;
4 }
5 else 
6 {
7   var obj = obj.nextSibling.nextSibling.nextSibling;
8 }

大部分旧浏览器是不支持nextElementSibling获取兄弟节点的，所以要用nextSibling。

 

  

posted on 2013-04-26 16:50  六欲  阅读(164)  评论(0)    收藏  举报

导航