各浏览器的JS兼容问题

来源：互联网发布：php按月访问量排行编辑：程序博客网时间：2024/06/05 23:07

ie/firefox：禁止选择文字

IE:

document.onselectstart = function(){return false;}

</script>

<body>

试试看能否选择这些文字？

</body>

FF:

<style>

html *{-moz-user-select: none;}

</style>

<body>

试试看能否选择这些文字？

</body>

以下是自己的一点心德:
不能选择父元素,子元素文本框却能被选择...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<STYLE>
DIV
{
-moz-user-select:-moz-none;
}
</STYLE>

</HEAD>
<BODY>
<DIV id="my"><INPUT TYPE="text" NAME="" CLASS="test">sadf</DIV>
</BODY>
</HTML>

-moz-user-select:有二个参数值
-moz-all
-moz-none

至于none是从哪里来的,我也不太清楚...

在FF2.0测试,用none,子元素所有的都不能选择,
而用-moz-none就不会被子元素所继承...
如果父元素用-moz-none ,子元素用-moz-all
则子元素能全选,而不能局部选择...

</HEAD>
<BODY>
<DIV id="my"><INPUT TYPE="text" NAME="" CLASS="test">sadf</DIV>

</BODY>
</HTML>

</HEAD>
<BODY>
<DIV id="my"><INPUT TYPE="text" NAME="">
sadf<br>
<div CLASS="test">sdlfja</div>
</DIV>
</BODY>
</HTML>

关于currentStyle的兼容

IE Only:

<style>

#test{width:100px;background-color:red;}

</style>

window.onload=function(){

var t=document.getElementById('test')

var ts=t.currentStyle;

t.innerHTML=

"t.style.width:"+ts.width+"<br />"+

"t.style.backgroundColor:"+ts.backgroundColor+"<br />"+

"t.style.color:"+ts.color+"<br />"+

"t.style.paddingLeft:"+ts.paddingLeft

}

</script>

<body>

</div>

</body>

FF Only:

<style>

#test{width:100px;background-color:red;}

</style>

window.onload=function(){

var t=document.getElementById('test')

var ts=document.defaultView.getComputedStyle(t, null);

t.innerHTML=

"t.style.width:"+ts.width+"<br />"+

"t.style.backgroundColor:"+ts.backgroundColor+"<br />"+

"t.style.color:"+ts.color+"<br />"+

"t.style.paddingLeft:"+ts.paddingLeft

}

</script>

<body>

</div>

</body>

IE Mozilla 说明 document.body.clientHeight(clientWidth)根据HTML的DTD而定方能得到准确值。 window.innerHeight(innerWidth)根据HTML的DTD而定方能得到准确值。 opacity(aplha=20) MozOpacity="0.2" event.clientY(clientX) event.pageY(pageX) event.keyCode event.which event.srcElement event.target window.external.AddFavorite('never-online.net', "never-online'website"); window.sidebar.addPanel('never-online.net', "never-online'website", ""); 此为添加到收藏夹代码，要兼容更多的浏览器，请看这里的代码 (DHTML事件-滚轮事件)onmousewheel DOMMouseScroll 可参看我的blog这篇文章 window.showModalDialog window.open(url, "name", "modal=yes") createPopup() xul htc控件 xbl绑定 filter滤镜只支持alpha（透明度，部分可通过clip来模拟） obj.setCapture() window.captureEvents(Event.eventType) obj.attachEvent(type, listener) obj.addEventListener(type, listener, useCapture) 添加事件的方法，如果要兼容，有几种方法，如用Mozilla的读写器来模拟IE的方法，或者用一个全局函数addEvent(type, listener, useCapture)来统一事件处理，或者写一个Event Manager更好一些，也可以在这里统一避免内存泄露 obj.detachEvent(type, listener) obj.removeEventListener(type, listener, useCapture) 一般情况下，用了attachEvent(addEventListener)方法，最好在beforeunload事件里用detach方法释放掉，这是个好习惯（偷懒的话就不说了:D）支持Webdings字体不支持Webdings字体 insertAdjacentHTML, insertAdjacentElement方法本身不支持，但可通过insertBefore或通过Range实现不支持读写器__defineSetter(Getter)__ 不支持支持对Element，EVENT等对象的prototype模式支持不支持对节点有nodeType常量属性 new ActiveXObject("MSXML2.XMLHTTP")或更高版本的ProgId XMLHttpRequest对象设置类似style.top=20这样的高度时，可不使用单位设置类似style.top=20+'px'这样的高度时，必须使用单位，否则无效 CSS的类名，不区分大小写（大小写不敏感） CSS的类名，区分大小写（大小写敏感）如：.myCss和.mycss类名就是不相同的冒泡事件event.cancelBubble=true event.stopPropagation()（需要传递event事件） CSS padding宽度并不在offset偏移坐标之内 CSS padding宽度默认是在offset偏移坐标之内，可用-moz-box-sizing:border-box来设置即可基本与IE相同可参见我这篇文章的代码 js动态加载xslt文件将xml转化成HTML，IE可用xmldoc.transformNode(xslDocument)方法 Mozilla中相对麻烦一些，要经过几道工序XSLTProcessor对象,transformToFragment或其它方法可参见我这篇文章的示例教程和代码持客户端存储数据-userData 不支持