浏览器的兼容问题/原因

最新推荐文章于 2022-05-06 20:18:19 发布

weixin_30828379

最新推荐文章于 2022-05-06 20:18:19 发布

阅读量132

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/fjl256/archive/2008/01/06/1027553.html

版权

关于用脚本设置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"的路径相对于站点根目录)
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居然页支持

转载于:https://www.cnblogs.com/fjl256/archive/2008/01/06/1027553.html

weixin_30828379

关注

0
点赞
踩
0

收藏

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

关于用脚本设置onload事件句柄<body><script>document.body.onload=function(){alert("!")}</script></body>在IE、Opera均正常有效，唯独FF既不执行，也不报错，因为在FF，document.body.onload是undefined(未定义)，把一个...
复制链接

扫一扫