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。