浏览器的兼容问题/原因[转贴]

最新推荐文章于 2021-11-15 15:09:25 发布

bndxgae

最新推荐文章于 2021-11-15 15:09:25 发布

阅读量451

点赞数

分类专栏： javascript 文章标签：浏览器 firefox xhtml ie function div

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

以前引用过经典狼大狗的一篇关于 JS在IE/ff的兼容性的文章,虽然很实用，但是僧多粥少啊！刚好经典有置顶贴里面有关于这方面的内容，就转过来了。稍微整理了下！ 关于用脚本设置onload事件句柄

<body> <script> document.body.οnlοad=function(){alert("!")} </script> </body>

在IE、Opera均正常有效，唯独FF既不执行，也不报错，因为在FF，document.body.onload是undefined(未定义)，把一个函数赋值给undefined 既不会发生什么事情，也不算出错。解决方法：

<body> <script> window.οnlοad=function(){alert("!")} </script> </body>

关于浮动代码和 documentElement / body 常常有人提问，为什么漂浮广告 / 对联代码在 xHTML 1.1 DTD 文件头 / FF 下不能使用这是因为，按照标准来说，我们看到的窗体的滚动条不应该是 body 的，而是 HTML 的（也就是 document.documentElement 对象）所以，解决办法是，把以前不标准的代码中， document.body.scrollTop 或者类似的代码变换为 document.documentElement.scrollTop 同名的dom函数（getElementsByName）在ie和firefox下不同表现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>runcode</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Author" content="Sheneyan" /> <script type="text/javascript"> window.οnlοad=function(){alert("document.getElementsByName(/"n/").length:"+document.getElementsByName("n").length)} </script> <style type="text/css"> </style> </head> <body> <div name="n">name:n</div> <div name="n">name:n</div> <div name="n">name:n</div> <div name="n">name:n</div> <div id="n">id:n</div> <div id="n">id:n</div> </body> </html>

[ 可以先修改再运行 ] IE下，用的getElementsByName结果，ID的权值大于name，但是在FF下却不是的 节点在ie和firefox下的不同 节点在ie和firefox下的不同： childNodes、firstChild、nextSibling、previousSibling

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>runcode</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Author" content="Sheneyan" /> </head> <body> <div id="t"> <input /> <input /> <input /> <input /> <input /> <input /> </div> <span id="tt"></span> <script type="text/javascript"> var t=document.getElementById('t'); var tt=document.getElementById('tt'); alert('t的第一个子结点是：'+t.firstChild.nodeName) alert('t下面有'+t.childNodes.length+'个子节点') alert('t的后一个节点是：'+t.nextSibling.nodeName) alert('tt的前一个节点是：'+tt.previousSibling.nodeName) var s=""; for (var i=0;i<t.childNodes.length;i++){   s+="/nt的第"+(i+1)+'个子结点名：'+t.childNodes[i].nodeName; } alert('这些是t的子结点：'+s) </script> </body> </html>

[ 可以先修改再运行 ] 取得元素的真实css属性

/** *取得元素的真实css属性 *written in 06.7 sheneyan */ function gs(d,a){ if (d.currentStyle){ var curVal=d.currentStyle[a] }else{ var curVal=document.defaultView.getComputedStyle(d, null)[a] } return curVal; }

png半透明图片作背景的兼容方案 png半透明图片作背景的兼容方案(IE5.5+,Firefox1.5,Opera9通过) 为每个png背景建一个这样的类:

/*non IE*/ html>body .pngbg1 { background: url(../img/toumbg.png) repeat; } /*IE*/ html .pngbg1 { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="img/toumbg.png"); }

然后设置容器的class="pngbg1"即可. (备注:"background: url()"的路径相对于文档, "AlphaImageLoader"的路径相对于站点根目录) 在IE下可以直接这样用: Js的实现方式见另外一篇文章： JS小技巧总汇 ie/firefox：禁止选择文字 在ie下，禁止用户选择内容，用脚本可以实现：

<script> document.onselectstart = function(){return false;} </script> <body> 试试看能否选择这些文字？ </body>

[ 可以先修改再运行 ] 而在firefox，这样子的写法没法实现相同的功能，刚才google了一下，找到一个类似的功能，不过居然是在css下实现的：

ie/ff脚本取得样式表属性float的异同 ie下：style.styleFloat ff下：style.cssFloat

<div style="float:left;color:red" οnclick="alert(this.style.float+' '+this.style.styleFloat+' '+this.style.cssFloat);alert(this.style.color)">aaa</div>

[ 可以先修改再运行 ] 鼠标按键常量在ie和firefox下的不同

<script type="text/javascript"> function omd(e){   var k=(e?e:event).button;   alert("你按的是"+k) } </script> <div οnmοusedοwn="omd(event)">点击我，我告诉你你按的是鼠标哪个键</div>

[ 可以先修改再运行 ] FF下。左键返回值是0，IE下返回值是1，但是右键都是2，FF居然有跳级。 IE 与 FF 对透明背景的元素表现不同 背景透明的元素( 底下也没有背景 )在 IE 中是点不到的, FF 中就可以

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>Hutia</title> </head> <body> <div style="width:300px; height:300px; border:1px solid black; position:absolute; left:150px; top:150px; z-index:1; background-color:yellow;"  οnclick="alert('你点到下面这个层了');"  >在 黄色背景地区点击一下看看</div> <div style="width:300px; height:300px;position:absolute; border:1px solid red; z-index:4; left:0px; top:0px; "  οnclick="alert('你点到上面这个层了');"  >在 没有背景地区点击一下看看, IE 应该不会有反应</div>

[ 可以先修改再运行 ] 另外： FF 下没有 event 用 arguments[0] FF 下没有 srcElement 用 target FF 下没有 parentElement 用 parentNode 总结：

function obj_event_onsomething(e){ var e=window.event?window.event:e; var srcEle=e.srcElement?e.srcElement:e.target; var theObjectYouWant=srcEle.parentNode; }

document.all.tags=document.getElementsByTagName 以前一直都认为document.all是IE 才有的东西，但是FF2.0居然页支持

bndxgae

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器的兼容问题/原因[转贴]

以前引用过经典狼大狗的一篇关于JS在IE/ff的兼容性的文章,虽然很实用，但是僧多粥少啊！刚好经典有置顶贴里面有关于这方面的内容，就转过来了。稍微整理了下！关于用脚本设置onload事件句柄document.body.onload=function(){alert("!")}在IE、Opera均正常有效，唯独FF既不执行，也不报错，因为在FF，document.
复制链接

扫一扫

专栏目录