收藏个!
[url=http://www.cnblogs.com/SAL2928/archive/2010/01/11/1643838.html]IE和FireFox的兼容性总结[/url]
[url=http://simonlaw.iteye.com/blog/210083]IE和FireFox浏览器的兼容问题( IE ->FF )[/url]
[url=http://yewky.iteye.com/blog/148142]FireFox与IE兼容常见问题大全[/url]
下面是有关css的。
[url=http://www.iteye.com/topic/204040]Javascript与CSS在IE和Firefox中的误区及区别[/url]
[url=http://tenderuser.iteye.com/blog/368263]css在IE/FF下的完美兼容[/url]
下面是有关ie6的bug
[url=http://www.css88.com/archives/579]IE6 BUG大全[/url]
[url=http://coolshell.cn/?p=1245]IE的CSS相关的BUG[/url]
---------------分割线(以下为自己总结)-------------------
[color=red]1 获取键盘代码时[/color]
IE下面为:window.event.keyCode
Firefox下面为:windown.event.which
[color=red]2 文件下载时下载名称的乱码处理方式不同[/color]
先做第一步处理:String fileName= new String(fileName.getBytes("iso-8859-1"), "utf-8");
然后:
IE: fileName=URLEncoder.encode(fileName, "utf-8");
Firefox:fileName=new String(fileName.getBytes("utf-8"), "iso-8859-1");
具体代码如下:
String agent = reqw.getHeader("USER-AGENT");
if(null != agent && -1 != agent.indexOf("MSIE")){
fileName=URLEncoder.encode(fileName, "utf-8");
}else if(null != agent && -1 != agent.indexOf("Mozilla")){
fileName=new String(fileName.getBytes("utf-8"), "iso-8859-1");
}
[color=red]3 getElementsByTagName在chrome不好用。[/color]
问题:在JS中获取<span><a href=""></a></span>中获取a链接的href通过条件进行更改,在chrome和Firefox用以下代码
var a=document.getElementById('registe').getElementsByTagName('a');
竟然获取不到值。
解决方法:后来找了很久更改成
var a=document.getElementById('registe').childNodes[0];
才解决问题。
[color=red]4 有关childNodes节点在IE,Firefox中含义不同的问题[/color]
自己描述的不够详细,这个网址说的很详细。如下:
[url=http://www.lm6.cn/html/20101/infos46920101161334.htm]IE和FireFox处理childNodes的异同[/url]
[color=red]5 设置样式text-overflow:ellipsis后,在火狐下面省略的字不会以。。。显示,IE下面可以正常显示。[/color]
解决方法的链接如下:
[url=http://www.aoao.org.cn/blog/2008/07/firefox-text-overflow-ellipsis/]text-overflow 全兼容[/url]
[url=http://www.cnblogs.com/mrhgw/archive/2006/10/13/527957.html]firefox通过XUL实现text-overflow:ellipsis的效果[/url]
[color=red]6 有关select的动态创建和删除[/color]
function getCaseBack(){
var result;
if (http_request.readyState == 4) {
if (http_request.status == 200)
{
result=http_request.responseText;
var array=new Array();//存放单个id和title
array=result.split(",");
var sel=document.getElementById('anli');
var len=sel.options.length;
//删除原先的option--注意保留第一项
for(var i=0;i<len;i++){
sel.remove(1);
}
if(result!=""){
for(var j=0;j<array.length;j++){
//创建option
//ie
// var op=document.createElement("option");
//op.value=(array[j].split("--"))[0];
// op.text=(array[j].split("--"))[1];
// sel.add(op);
//ie和火狐兼容
var oOption=new Option((array[j].split("--"))[1],(array[j].split("--"))[0]);
sel.options[j]=oOption;
}
}
}
}
}
//删除 option 在 firefox 是 select.remove(selectedIndex),而不是 options.remove()
[color=red]7 有关Firfox中button标签的问题[/color]
问题:Firfox中的button标签如果不声明类型的话,点击触发自定义事件如tologin(),事件没有触发。
解决办法:在button标签内加type='button',不然会默认认为是submit.
[color=red]8 处理只能输入数字[/color]
function keyPress(evt) {
evt = (evt) ? evt : ((window.event) ? window.event : "");
var keyCode = evt.keyCode ? evt.keyCode : evt.which;
if (keyCode!=8 && (keyCode < 48 || keyCode > 57)) {
if (window.event) { //IE
evt.returnValue = false;
}else{ //Firefox
evt.preventDefault(); //event.returnValue=false 效果相同.
}
}
}
[color=red]9 动态添加css[/color]
IE
var css=document.createStyleSheet();
css.addRule("html*","{-moz-user-select:none;}");
FF
if(!document.createStyleSheet) {
var cssObj=document.createElement("style");
var tnObj=document.createTextNode("html{-moz-user-select:none;}");
cssObj.appendChild(tnObj);
document.body.appendChild(cssObj);
}
[color=red]10 window onload()在FF不可用[/color]
IE下面可以使用function window.onload(){}但在FF下面不可用。
原因:Firefox不支持对象加事件的函数名
改为用:
window.onload = fnShow;
function fnShow(){}
或直接写为:
window.onload = function (){}
[color=red]11 function String.prototype.Trim()在FF不可用[/color]
IE下面function String.prototype.Trim(){}可以正常使用,但在FF下面不可用。
改用:
String.prototype.trim=function (){}
[color=red]12 FF获取event对象[/color]
在函数调用中传递event对象的解决方法就不多说了。
主要说下在函数调用中不传递event对象
var evt = window.event || arguments.callee.caller.arguments[0]; // 获取event对象
var src = evt.srcElement || evt.target; // 获取触发事件的源对象
[color=red]13 ie7 firefox在 ul li 的差异 [/color]
解决方法:在ul样式中增加
list-style:none;
margin-left:50px;
margin-left大小自己调节。
[color=red]14 Firefox下面的后退兼容问题[/color]
以下是三种返回(后退,back)的脚本:
<a οnclick=”history.back(); return false;” href=”javascript:void(0);”>返回</a>(IE,FireFox兼容)
<a οnclick=”javascript:history.go(-1);” href=”#”>返回</a>(IE兼容)
<input οnclick=”history.go(-1)” type=”button” value=”返回” />(IE,FireFox兼容)
我在程序中用的是button,所以写成
<button οnclick="history.back(); return false;">返回</button>
[color=red]15 阻止事件发生[/color]
IE:event.returnValue = false;
FF:event.preventDefault();
[color=red]16 添加事件[/color]
IE:element.attachEvent(‘onclick’, observer);
FF:element.addEventListener(‘click’, observer, true);
[url=http://www.cnblogs.com/SAL2928/archive/2010/01/11/1643838.html]IE和FireFox的兼容性总结[/url]
[url=http://simonlaw.iteye.com/blog/210083]IE和FireFox浏览器的兼容问题( IE ->FF )[/url]
[url=http://yewky.iteye.com/blog/148142]FireFox与IE兼容常见问题大全[/url]
下面是有关css的。
[url=http://www.iteye.com/topic/204040]Javascript与CSS在IE和Firefox中的误区及区别[/url]
[url=http://tenderuser.iteye.com/blog/368263]css在IE/FF下的完美兼容[/url]
下面是有关ie6的bug
[url=http://www.css88.com/archives/579]IE6 BUG大全[/url]
[url=http://coolshell.cn/?p=1245]IE的CSS相关的BUG[/url]
---------------分割线(以下为自己总结)-------------------
[color=red]1 获取键盘代码时[/color]
IE下面为:window.event.keyCode
Firefox下面为:windown.event.which
[color=red]2 文件下载时下载名称的乱码处理方式不同[/color]
先做第一步处理:String fileName= new String(fileName.getBytes("iso-8859-1"), "utf-8");
然后:
IE: fileName=URLEncoder.encode(fileName, "utf-8");
Firefox:fileName=new String(fileName.getBytes("utf-8"), "iso-8859-1");
具体代码如下:
String agent = reqw.getHeader("USER-AGENT");
if(null != agent && -1 != agent.indexOf("MSIE")){
fileName=URLEncoder.encode(fileName, "utf-8");
}else if(null != agent && -1 != agent.indexOf("Mozilla")){
fileName=new String(fileName.getBytes("utf-8"), "iso-8859-1");
}
[color=red]3 getElementsByTagName在chrome不好用。[/color]
问题:在JS中获取<span><a href=""></a></span>中获取a链接的href通过条件进行更改,在chrome和Firefox用以下代码
var a=document.getElementById('registe').getElementsByTagName('a');
竟然获取不到值。
解决方法:后来找了很久更改成
var a=document.getElementById('registe').childNodes[0];
才解决问题。
[color=red]4 有关childNodes节点在IE,Firefox中含义不同的问题[/color]
自己描述的不够详细,这个网址说的很详细。如下:
[url=http://www.lm6.cn/html/20101/infos46920101161334.htm]IE和FireFox处理childNodes的异同[/url]
[color=red]5 设置样式text-overflow:ellipsis后,在火狐下面省略的字不会以。。。显示,IE下面可以正常显示。[/color]
解决方法的链接如下:
[url=http://www.aoao.org.cn/blog/2008/07/firefox-text-overflow-ellipsis/]text-overflow 全兼容[/url]
[url=http://www.cnblogs.com/mrhgw/archive/2006/10/13/527957.html]firefox通过XUL实现text-overflow:ellipsis的效果[/url]
[color=red]6 有关select的动态创建和删除[/color]
function getCaseBack(){
var result;
if (http_request.readyState == 4) {
if (http_request.status == 200)
{
result=http_request.responseText;
var array=new Array();//存放单个id和title
array=result.split(",");
var sel=document.getElementById('anli');
var len=sel.options.length;
//删除原先的option--注意保留第一项
for(var i=0;i<len;i++){
sel.remove(1);
}
if(result!=""){
for(var j=0;j<array.length;j++){
//创建option
//ie
// var op=document.createElement("option");
//op.value=(array[j].split("--"))[0];
// op.text=(array[j].split("--"))[1];
// sel.add(op);
//ie和火狐兼容
var oOption=new Option((array[j].split("--"))[1],(array[j].split("--"))[0]);
sel.options[j]=oOption;
}
}
}
}
}
//删除 option 在 firefox 是 select.remove(selectedIndex),而不是 options.remove()
[color=red]7 有关Firfox中button标签的问题[/color]
问题:Firfox中的button标签如果不声明类型的话,点击触发自定义事件如tologin(),事件没有触发。
解决办法:在button标签内加type='button',不然会默认认为是submit.
[color=red]8 处理只能输入数字[/color]
function keyPress(evt) {
evt = (evt) ? evt : ((window.event) ? window.event : "");
var keyCode = evt.keyCode ? evt.keyCode : evt.which;
if (keyCode!=8 && (keyCode < 48 || keyCode > 57)) {
if (window.event) { //IE
evt.returnValue = false;
}else{ //Firefox
evt.preventDefault(); //event.returnValue=false 效果相同.
}
}
}
[color=red]9 动态添加css[/color]
IE
var css=document.createStyleSheet();
css.addRule("html*","{-moz-user-select:none;}");
FF
if(!document.createStyleSheet) {
var cssObj=document.createElement("style");
var tnObj=document.createTextNode("html{-moz-user-select:none;}");
cssObj.appendChild(tnObj);
document.body.appendChild(cssObj);
}
[color=red]10 window onload()在FF不可用[/color]
IE下面可以使用function window.onload(){}但在FF下面不可用。
原因:Firefox不支持对象加事件的函数名
改为用:
window.onload = fnShow;
function fnShow(){}
或直接写为:
window.onload = function (){}
[color=red]11 function String.prototype.Trim()在FF不可用[/color]
IE下面function String.prototype.Trim(){}可以正常使用,但在FF下面不可用。
改用:
String.prototype.trim=function (){}
[color=red]12 FF获取event对象[/color]
在函数调用中传递event对象的解决方法就不多说了。
主要说下在函数调用中不传递event对象
var evt = window.event || arguments.callee.caller.arguments[0]; // 获取event对象
var src = evt.srcElement || evt.target; // 获取触发事件的源对象
[color=red]13 ie7 firefox在 ul li 的差异 [/color]
解决方法:在ul样式中增加
list-style:none;
margin-left:50px;
margin-left大小自己调节。
[color=red]14 Firefox下面的后退兼容问题[/color]
以下是三种返回(后退,back)的脚本:
<a οnclick=”history.back(); return false;” href=”javascript:void(0);”>返回</a>(IE,FireFox兼容)
<a οnclick=”javascript:history.go(-1);” href=”#”>返回</a>(IE兼容)
<input οnclick=”history.go(-1)” type=”button” value=”返回” />(IE,FireFox兼容)
我在程序中用的是button,所以写成
<button οnclick="history.back(); return false;">返回</button>
[color=red]15 阻止事件发生[/color]
IE:event.returnValue = false;
FF:event.preventDefault();
[color=red]16 添加事件[/color]
IE:element.attachEvent(‘onclick’, observer);
FF:element.addEventListener(‘click’, observer, true);