浏览器的兼容问题/原因[转贴]
2008-07-11 21:10
204 查看
以前引用过经典狼大狗的一篇关于JS在IE/ff的兼容性的文章,虽然很实用，但是僧多粥少啊！
刚好经典有置顶贴里面有关于这方面的内容，就转过来了。稍微整理了下！
关于用脚本设置onload事件句柄
<body>
<script>
document.body.onload=function(){alert("!")}
</script>
</body>
在IE、Opera均正常有效，唯独FF既不执行，也不报错，因为在FF，document.body.onload是undefined(未定义)，把一个函数赋值给undefined
既不会发生什么事情，也不算出错。
解决方法：
<body>
<script>
window.onload=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.onload=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下实现的：
<style>
html *{-moz-user-select: none;}
</style>
<body>
试试看能否选择这些文字？
</body>
ie/ff脚本取得样式表属性float的异同
ie下：style.styleFloat
ff下：style.cssFloat
<div style="float:left;color:red" onclick="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 onmousedown="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;" onclick="alert('你点到下面这个层了');" >在 黄色背景地区点击一下看看</div> <div style="width:300px; height:300px;position:absolute; border:1px solid red; z-index:4; left:0px; top:0px; " onclick="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居然页支持
刚好经典有置顶贴里面有关于这方面的内容，就转过来了。稍微整理了下！
关于用脚本设置onload事件句柄
<body>
<script>
document.body.onload=function(){alert("!")}
</script>
</body>
在IE、Opera均正常有效，唯独FF既不执行，也不报错，因为在FF，document.body.onload是undefined(未定义)，把一个函数赋值给undefined
既不会发生什么事情，也不算出错。
解决方法：
<body>
<script>
window.onload=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.onload=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下实现的：
<style>
html *{-moz-user-select: none;}
</style>
<body>
试试看能否选择这些文字？
</body>
ie/ff脚本取得样式表属性float的异同
ie下：style.styleFloat
ff下：style.cssFloat
<div style="float:left;color:red" onclick="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 onmousedown="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;" onclick="alert('你点到下面这个层了');" >在 黄色背景地区点击一下看看</div> <div style="width:300px; height:300px;position:absolute; border:1px solid red; z-index:4; left:0px; top:0px; " onclick="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居然页支持
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 浏览器的兼容问题/原因
- 浏览器常见的兼容问题
- [转载]IE6,IE7,FF等浏览器不兼容原因及解决办法
- 跨浏览器解决事件处理程序兼容问题
- 最全的CSS浏览器兼容问题
- WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理--02
- IE与firefox浏览器兼容问题
- Web前端中常见的浏览器兼容问题有哪些？
- 关于文件上传校验时浏览器不兼容问题（结合struts1+spring+hibernate）
- css浏览器兼容问题
- 浏览器兼容问题
- 总结JavaScript中浏览器的兼容问题
- 【CSS】最全的CSS浏览器兼容问题
- 浏览器js兼容问题
- 最全的CSS浏览器兼容问题
- 解决jsp页面浏览器不兼容，样式变样问题
- 浅谈js中startsWith 函数不能在任何浏览器兼容的问题
- 如何解决IE6/IE7/IE8浏览器不兼容HTML5新标签的问题
- JavaScript js 兼容浏览器问题 兼容FireFox(FF)、IE的解决方法
- 【转载】各浏览器CSS兼容问题