您的位置：首页 > 其它

IE与firefox 兼容问题 (二、项目经验总结)

2010-04-13 20:37 281 查看

我们项目立即要做ie与firefox兼容的事情了，特别地开个帖子来记录些点点滴滴...待正式做后，这里的内容就more起来了

1、第一天，遇到了a标签的click()事件问题：因为我们项目里使用了大量的异步请求，而这些请求全是使用a标签的onclck事件绑定的。。。在ie里边可以通过触发a标签的click()事件来触发请求。但是到了火狐后，对a标签的click()事件失效。。后来俺想了个办法：为a标签绑定click()方法。。。通过其触发a标签的onclick()方法。但是因为我们项目a标签的onclick方法是通过prototype封装的js来动态绑字的。。火狐不识别，该方案失败。最后想到了input button标签，该可以通过click()来触发其单击的事件。因此在组件里边将生成a 标签的代码全部改为input button，问题得到解决。

2、第二天，任然遇到第一天的问题，只不过换成了div了。。。因此我写了个公共方法来判断：

if(火狐浏览器)

{

　　　　if(obj && obj.onclick)/*如果对象存在，并且存在对象的onclick方法，则将click方法关联到onclick方法上。*/

{

　　　　obj.click=function(){

obj.onclick();

};

}

}

，在页面加载后调用这个js，并传入相应的参数，成功搞定！

3、样式问题：我们界面分成了N多列，在火狐下严重变形，跑下去了。。。结果加了个float:left，成功搞定！

4、对于非标准属性值的问题：
在ie中，obj.setAttribute("")obj.setAttribute("a","b")<==>obj.a="b"; obj.getAttribute("a")<==>obj.a;
而在firefox 中，obj.setAttribute("")obj.setAttribute("a","b")<≠>obj.a="b"; obj.getAttribute("a")<≠>obj.a;
示例：

<body >
<div value="中华人民共和国万岁" id="div1"></div>
<input type="button" value="点击老朽" onclick="click1();"/>
<mce:script type="text/javascript"><!--
function click1()
{
var obj=document.getElementById("div1");
var str="value不是div的w3c标准属性。/n obj是指的div的对象/n/n";
str+="obj.value："+div1.value;
str+="/nobj.getAttribute(/"value/")："+obj.getAttribute("value");
obj.value="中華人民共和國萬歲";
str+="/n/n调用obj.value=/"中華人民共和國萬歲/";之後的結果："
str+="/nobj.value："+div1.value;
str+="/nobj.getAttribute(/"value/")："+obj.getAttribute("value");
<!--setAttribute的是一样的效果，这里略-->
alert(str);
}
// --></mce:script>
</body>

運行後的結果爲：

5、透明滤镜效果：ie：filter:alpha(opacity:0.5)，firefox:opacity:0.5

6、iframe可编辑：ie->window.frames["iframeName"].designMode="on"，

firefox->window.frames["iframeName"].document.designMode="on";window.frames["iframeName"].document.contentEditable="true"
7、div等标签的disabled设置为不可用：写个方法在其不可用时，将有的onclick等事件暂时保存，并将其清除掉。。。在设置为可以时再还原。。。

8、from表单的重复提交没效果，如下代码：

<form action="a" method="post" target="if1" ><!--不管post还是get请求都是一样的-->
<input type="text" name="txt1" value="testValue" />
<input type="submit" value="Submit" />
</form>
<iframe id="if1" name="if1"></iframe>

第一点点击后能出来效果，第二次点击firefox 就不发送数据了，不知道这是firefox故意为之还是w3c的标准(不过老朽好像没有看到过w3c有这样的标准)

修改方案为：

在form提交之前更改下target属性，就可以了。修改后的代码为：

<form action="a" method="post" target="if1"  onsubmit="this.target=this.target;">
<input type="text" name="txt1" value="testValue" />
<input type="submit" value="Submit" />
</form>
<iframe id="if1" name="if1"></iframe>

9、自动滚屏：

marquee是个好东西啊
可惜firefox/ie8对他的支持不够好

marquee在firfox下有时候滚动，有时候不滚动..
这是最令人头疼的事情
要不然不滚，要不然滚，这个问题可能就更容易解决

有很多js脚本可以模拟滚动

不过发现的最简单的办法是
把marquee的标签放在js里面。。。。。。。

<script language="javascript">

function marquee_start()
{
document.write("<marquee id='_dstid_MsgTitleMq' loop='-1' scrollamount='1' behavior='scroll' >")
}
function marquee_end()
{
document.write("</marquee>")
}
</script>
<script language=JavaScript>
marquee_start();
</script>
<div>中华人民共和国万岁中華人民共和國萬歲</div>
<script language="JavaScript">
marquee_end();
</script>

遇到此类问题，可以这样解决看看。

10、parentElement只支持ie，而标准的parentNode同时支持IE+firefox

11、input选择框触发选择的问题：

<table>
<!--因为要使点击tr选中/取消复选框，所以在tr上加onclick方法-->
<tr onclick="document.getElementById('inp1').click();">
<td><input type="checkbox" id="inp1" style="border:1px solid red;" mce_style="border:1px solid red;"/></td><td>在ie和firefox下分别点击复选框，看到不同的现象了么</td>
</tr>
</table>

将以上代码保存后，到firefox点击input可以看到选不中checkbox。。。
解决办法是加个标记来判断，

<table>
<tr onclick="var obj=document.getElementById('inp1');if(!obj.isFirstChecked){obj.click();}obj.isFirstChecked=false;/*这里必须要置为false，不然下次点击不起作用*/">
<td><input type="checkbox" id="inp1" style="border:1px solid red;" mce_style="border:1px solid red;" onclick="this.isFirstChecked=true;"/></td><td>在ie和firefox下分别点击复选框，看到不同的现象了么</td>
</tr>
</table>

12 from 表单内的文本回车提交

　　在firefox 中，如果你有一个可见的表单，在表单的文本框里边按下回车，firefox会触发表单提交事件。解决办法：1、为所有的文本框添加keydown事件，屏蔽回车(13)事件。2、将form表单提交修改为隐藏，然后使用ajax等方法来提交。

13、firefox 文本框光标丢失

在用Firefox浏览页面时是否发现鼠标点击 textarea,input表单输入文本时闪烁的光标不见了,但能正常输入文本呢?
你很幸运遇到了”Firefox光标丢失”的问题,前阵子也被这问题搞到头晕晕的,结过网上查找等方法找出了如下：

以下面为例,总结了页面容器中设置了以下部分属性,均会导致Firefox光标丢失：

overflow:auto

overflow-x:auto;

overflow-y:auto;

overflow:scroll

overflow-x:scroll;

overflow-y:scroll;

overflow-x:hidden;

overflow-y:hidden;

position:absolute

1. 避免在body设置overflow:XXX令光标丢失，但overflow:hidden;除外
2. 在position:absolute;加多个针对FF写的position:fixed; 但IE6不支持此属性,可以写成:#box { position:fixed;_position:absolute;

14、获取input file 文件绝对路径问题：

使用input file进行文件上传时，因为要获取文件的绝对路径从而知道得到文件的大小，但是在ie8中终始不能获取大小，调试代码后发现：XXX.value的路径居然变成了C:/fakepath/*，真实路径被取代了。在网上找到了答案：原来是因为IE8增加了安全选项，默认情况下不显示上传文件的真实路径。

解决办法：

一、进入internet选项，修改下设置即可显示真实的文件路径。

工具 -> Internet选项 -> 安全 -> 自定义级别 -> 找到“其他”中的“将本地文件上载至服务器时包含本地目录路径”，选中“启用”即可。

二、使用js来获取文件的路径：

function getPath(obj) {/*最新的firefox不能获取到全路径了。但是可以通过obj.files[0].fileSize/size来获取选择的文件的大小。*/
if (obj) {/*只有使用ie8以上的浏览器才能调用该代码。*/
obj.select();
return document.selection.createRange().text;
}
}

但是，使用这个办法时要注意：input file 及其所有的父节点中不能有display:none属性的东西，不然获取不了路径。因此可以使用一个div，设置宽度大小为0；或使用一个浮动的层，将这个层移动到很远很远的地方(top:-999px;left:-999px;)。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： firefox ie input scroll div border

相关文章推荐

新的分享

章节导航