打印

[兼容]刁钻的狐狸喜欢听歌剧(各种浏览器兼容问题请发这里)

本主题由 bound0 于 2008-1-2 13:56 解除置顶
主题说明:这是一个有关浏览器兼容性问题和解决此类问题的经验策略的专题。


名词解释:[专题] 此处的所谓“专题”是指对相关问题的一种形式上的聚合,兼有讨论和总结的目的和性质。


参与方式及要求:

1、发表讨论贴(包括提问和回答)。

2、给出相关讨论贴的链接。

3、转载相关文章或给出文章链接。

4、不得提出与专题主题(浏览器兼容性问题和解决此类问题的经验策略)无关的问题。

5、帖子尽量带上标题,链接尽量附有文字说明。


本专题由版主负责定期编辑整理。

[隆重推荐] 把应用程序从 Internet Explorer 迁移到 Mozilla
(IBM文献)


[隆重推荐]w3schools的DOM教程(有兼容性参考)

[隆重推荐] Web标准版的常见问题集合。


[ 本帖最后由 bound0 于 2007-7-24 18:28 编辑 ]
[Bound0 专题列表]QUE SAIS-JE?
生物信息技术支持动漫论坛动漫分享群:45274013

关于用脚本设置onload事件句柄

我先抛块砖,请大家拿玉来砸!

 提示:您可以先修改部分代码再运行
在IE、Opera均正常有效,唯独FF既不执行,也不报错,因为在FF,document.body.onload是undefined(未定义),把一个函数赋值给undefined既不会发生什么事情,也不算出错。

这么写的在IE、Opera和FF都有效:

 提示:您可以先修改部分代码再运行
[ 本帖最后由 bound0 于 2006-8-19 15:29 编辑 ]
[Bound0 专题列表]QUE SAIS-JE?
生物信息技术支持动漫论坛动漫分享群:45274013

关于用脚本绑定事件句柄

IE 下用 attachEvent, FF 下用 addEventListener

相关讨论如下:
http://search.blueidea.com/?q=addEventListener&bisearch=bbs
(基本上看几贴就明白了,我就不详细说了。请大家看的时候不要顶老贴,谢谢)

参考链接:
http://bbs.blueidea.com/viewthre ... p;page=1#pid2248824
http://bbs.blueidea.com/viewthread.php?tid=2507914

[ 本帖最后由 bound0 于 2006-8-19 17:24 编辑 ]

关于浮动代码和 documentElement / body

常常有人提问,为什么 漂浮广告 / 对联代码 在 xHTML 1.1 DTD 文件头 / FF 下不能使用

这是因为,按照标准来说,我们看到的窗体的滚动条不应该是 body 的,而是 HTML 的(也就是 document.documentElement 对象)

所以,解决办法是,把以前不标准的代码中, document.body.scrollTop 或者类似的代码变换为 document.documentElement.scrollTop

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

关于 ID 与 html 对象元素的引用

这个问题的原因非常非常多。但是一个基本的前提条件就是,对于IE 来说,一个HTML 元素的 ID 可以直接在脚本中当作变量名来使用,而 FF 中不可以。

解决办法:
将类似
复制内容到剪贴板
代码:
<input id="t1"><input type="button" value="click me" onclick="alert(t1.value)">
的代码变换为
复制内容到剪贴板
代码:
<input id="t1"><input type="button" value="click me" onclick="alert(document.getElementById('t1').value)">
ps:
bound0 老兄你还真敢提啊....这个帖子我想了 n 久都不敢写......太长了.....有 n 多 n 多的注意点..............

[ 本帖最后由 hutia 于 2006-8-19 16:27 编辑 ]

TOP

关于 事件对象的使用差异

IE 中,事件激发的时候,有一个全局的 window.event 对象保存了事件的相关信息

IE Only

 提示:您可以先修改部分代码再运行
FF 中,事件激发的时候,将一个局部的 event 对象作为第一个参数传递给了事件处理函数
FF Only

 提示:您可以先修改部分代码再运行
此外,IE 的 event 对象和 FF 的 event 对象还稍有不同。
以下是我常用的兼容形式

 提示:您可以先修改部分代码再运行
参考
http://bbs.blueidea.com/thread-2667939-1-1.html

[ 本帖最后由 bound0 于 2006-8-20 19:06 编辑 ]

TOP

CSS 属性标准化问题

IE 真的是一种很娇惯人的浏览器。

在 Opera 下,以及在 声明了 xHTML 1.1 DTD 头的 FF 下,CSS 属性必须按照标准来写

就是说,这样是错的:
复制内容到剪贴板
代码:
theHTMLObject.style.left=200;
而必须加上单位
复制内容到剪贴板
代码:
theHTMLObject.style.left=200+"px";
其他属性依次类推

TOP

CSS 不同浏览器表达的不同

这个就是所谓的 盒模型 问题

参见
http://search.blueidea.com/?q=%E ... 8B&bisearch=bbs


ps:
累死我了....闪先....其他的若干条等俺心情好了再来.......
||||||||||||||||||||||||||||||||||||||||||||||||||||


Bound0:
这个没说清楚,不算。心情好时要补全呐!

[ 本帖最后由 bound0 于 2006-8-19 17:32 编辑 ]

TOP

大家只管发吧,不怕多:过几天会整理一下,第一帖会变成目录。

请大家注意:

发帖时要加标题,

版主整理时会将

标题用作目录。

谢谢!


[ 本帖最后由 bound0 于 2006-11-23 09:51 编辑 ]
[Bound0 专题列表]QUE SAIS-JE?
生物信息技术支持动漫论坛动漫分享群:45274013

TOP

取得父标签

http://bbs.blueidea.com/viewthread.php?tid=2665211

FF 下没有 srcElement
用 target

FF 下没有 parentElement
用 parentNode
[Bound0 专题列表]QUE SAIS-JE?
生物信息技术支持动漫论坛动漫分享群:45274013

TOP

同名的dom函数(getElementsByName)在ie和firefox下不同表现



 提示:您可以先修改部分代码再运行
[ 本帖最后由 bound0 于 2006-8-21 11:50 编辑 ]
子叶:子乌的叶子
帅哥们,美女们,新的一年终于来了,祝贺你们...终于又老了一岁~

TOP

节点在ie和firefox下的不同

节点在ie和firefox下的不同:
childNodes、firstChild、nextSibling、previousSibling

 提示:您可以先修改部分代码再运行
[ 本帖最后由 bound0 于 2006-8-21 11:50 编辑 ]
子叶:子乌的叶子
帅哥们,美女们,新的一年终于来了,祝贺你们...终于又老了一岁~

TOP

取得元素的真实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;
}
[ 本帖最后由 Sheneyan 于 2006-11-19 22:32 编辑 ]
子叶:子乌的叶子
帅哥们,美女们,新的一年终于来了,祝贺你们...终于又老了一岁~

TOP

……

我是不是有点走歪的倾向?

实现相同DOM功能的不同方法是否算ie/ff的不同?
子叶:子乌的叶子
帅哥们,美女们,新的一年终于来了,祝贺你们...终于又老了一岁~

TOP

引用:
原帖由 Sheneyan 于 2006-8-20 20:05 发表
……

我是不是有点走歪的倾向?

实现相同DOM功能的不同方法是否算ie/ff的不同?
我觉得很好啊....之所以要用不同方法实现相同DOM功能,正是因为 IE 和 FF 的 DOM 模型不同啊

TOP

ff下<textarea>和<table>不能对长英文字符串强制换行

 提示:您可以先修改部分代码再运行

TOP

避免上下框架布局的页面在出现横向滚动条

上下框架布局的页面在IE中出现讨厌的横向滚动条, 用传统办法隐去后又会在Firefox中出现
一般解决办法是删除页面顶部的DOCTYPE,  但还有一个办法即通过设置html样式

如有index.htm:
复制内容到剪贴板
代码:
<frameset rows="*,50">
  <frame src="main.htm" name="mainFrame" id="mainFrame" title="mainFrame" />
  <frame src="toolbar.htm" name="bottomFrame" id="bottomFrame" title="bottomFrame" scrolling="no"/>
</frameset>
则在main.htm添加html标签样式"overflow-x: hidden;overflow-y: auto"即可. 这样可以不必删除DOCTYPE声明
复制内容到剪贴板
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title></title>
<style type="text/css">
html{overflow-x: hidden;overflow-y: auto}
</style>
.....
.....
[ 本帖最后由 bound0 于 2006-8-21 11:52 编辑 ]

TOP

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"的路径相对于站点根目录)

http://www.jluvip.com/blog/article.asp?id=243

使用<img>标签的话可以参照:
http://homepage.ntlworld.com/bobosola/pnginfo.htm
http://www.iood.net/forum/viewthread.php?tid=9065&extra=&page=1

[ 本帖最后由 bound0 于 2006-8-21 11:54 编辑 ]

TOP

ie/firefox:禁止选择文字

刚刚找的……

在ie下,禁止用户选择内容,用脚本可以实现:

 提示:您可以先修改部分代码再运行
而在firefox,这样子的写法没法实现相同的功能,刚才google了一下,找到一个类似的功能,不过居然是在css下实现的:

 提示:您可以先修改部分代码再运行
把上面两个合在一起就可以ie/ff通吃了:D

例子:http://bbs.blueidea.com/viewthre ... p;page=1#pid2723586

[ 本帖最后由 bound0 于 2006-8-27 15:21 编辑 ]
子叶:子乌的叶子
帅哥们,美女们,新的一年终于来了,祝贺你们...终于又老了一岁~

TOP

建议做成表格,左右两遍对比
Internet Explorer                Firefox            oprea    . . .
xxx                                   ccc                bbb

这样一目了然

TOP

兼容性好的做法

我的习惯是:对象.事件=function(){...};这样写可以有一个好的兼容性 能兼容到5.0。
这样简单程序用足够了,除非一个事件要激发好几个函数,这样的情况我还没有遇到过。

而且ie 对id属性没有大小写要求 ff有 所以最好全部小写

 提示:您可以先修改部分代码再运行
[ 本帖最后由 mickeyboy 于 2006-8-23 16:25 编辑 ]
无限级算法thread-2780498-1-6.html 2780498-1-1.html

TOP

我以前写过了一些了,现在放上来吧

http://www.never-online.net/reference/mozillaVsIE

[ 本帖最后由 bound0 于 2006-8-24 13:28 编辑 ]

TOP

document.all.tags=document.getElementsByTagName

bluemiracle的满多东西不能说是mozilla的,那些应该算是标准的DOM里面都有的东西,比如getElementById之类。

不过我倒是想起ie的一个写法,我想知道这个写法的人估计也不会很多。

document.all.tags=document.getElementsByTagName

 提示:您可以先修改部分代码再运行
子叶:子乌的叶子
帅哥们,美女们,新的一年终于来了,祝贺你们...终于又老了一岁~

TOP

再针对bluemiracle回一帖:
看了一遍你的文章,有几点似乎值得推敲,底下是我有存疑的部分内容(有些有稍经整理):
引用:
a ie没有nodeType常量属性
b ie的冒泡事件event.cancelBubble=true,mozilla的:event.stopPropagation()(需要传递event事件)
c ie无空白节点
关于a和c,参看前面12楼的帖子,nodeType的话你把nodeName改成nodeType即可。
关于b,我之前曾经特地测试了一次,在ie6和firefox 1.5之下,e.cancelBubble=true都可以阻止冒泡(虽然我印象中是不同的,不过测试结果让我很郁闷:是相同的),举例如下:

 提示:您可以先修改部分代码再运行
子叶:子乌的叶子
帅哥们,美女们,新的一年终于来了,祝贺你们...终于又老了一岁~

TOP

匿名函数在ie和firefox下的区别

这个区别是今天才发现的(我个人今天才发现的=。=),未经严格测试,只测试了w2k sp4、myie0.9.27(ie6 sp1)和Firefox 1.5.0.6
复制内容到剪贴板
代码:
window.onload = function abc(){...}
这种写法在ie下,函数并不是匿名函数,有名称abc
在firefox下函数仍然匿名,使用abc找不到该函数

具体讨论贴:
http://bbs.blueidea.com/thread-2671140-1-1.html
子叶:子乌的叶子
帅哥们,美女们,新的一年终于来了,祝贺你们...终于又老了一岁~

TOP

鼠标按键常量在ie和firefox下的不同

又是刚刚发现的=。=


event.button是事件中鼠标按键对应的常量,在ie和firefox下含义不同……

 提示:您可以先修改部分代码再运行
具体帖子:
http://bbs.blueidea.com/viewthre ... page%3D1#pid2726959
子叶:子乌的叶子
帅哥们,美女们,新的一年终于来了,祝贺你们...终于又老了一岁~

TOP