非常不错的关于IE与FireFox的js和css几处不同点[转自星火燎原]

在蓝色上看到这篇文章的,感觉作者总结的不错,至少有些偶自己也没有真正的认识过。这些 东西的确是应该好好总结一下的,可惜偶这人比较懒,收藏整理于此,便于自己学习!

1.firefox不能对innerText支持。
firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了。如果不用textContent,如果字符串里面不包含HTML代码也可以用innerHTML代替。
2.禁止选取网页内容:
在IE中一般用js:obj.onselectstart=function(){return false;}
而firefox用CSS:-moz-user-select:none

3.滤镜的支持(例:透明滤镜):
IE:filter:alpha(opacity=10);
firefox:-moz-opacity:.10;

4.捕获事件:
IE:obj.setCapture() 、obj.releaseCapture()
Firefox: document.addEventListener("mousemove",mousemovefunction,true);
    document.removeEventListener("mousemove",mousemovefunction,true);

5.获取鼠标位置:
IE:event.clientX、event.clientY
firefox:需要事件函数传递事件对象
    obj.onmousemove=function(ev){
        X= ev.pageX;Y=ev.pageY;
    }

6.DIV等元素的边界问题:
比如:设置一个div的CSS::{width:100px;height:100px;border:#000000 1px solid;}
IE中:div的宽度(包括边框宽度):100px,div的高度(包括边框宽度):100px;
而firefox:div的宽度(包括边框宽度):102px,div的高度(包括边框宽度):102px;

所以在做这个兼容IE和firefox的拖动窗口时,在js和css的写法上要动点脑筋,给大家两个小技巧

一.判断浏览器类型:
var isIE=document.all? true:false;
我写了一个变量,如果支持document.all语法那么isIE=true,否则isIE=false

二.在不同浏览器下的CSS处理:
一般可以用!important来优先使用css语句(仅firefox支持)
比如:{border-width:0px!important;border-width:1px;}
在firefox下这个元素是没有边框的,在IE下边框宽度是1px

几处XHTML与正常状态下的JS、CSS的区别

在网页开头加了这个代码就是所谓的XHTML标准了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML标准下的几个不同点:
1.document.documentElement 与 document.body
代码中设置页面的CSS时一定要用:document.documentElement 
比如:document.documentElement.style.overflow='hidden';
overflow-X、overflow-Y 这两个分坐标属性XHTML是不支持的;

2.在取得网页窗口区域和获取滚动条位移距离时也要用document.documentElement 
即这四个属性(clientWidth、clientHeight、scrollLeft、scrollTop)一定要用document.documentElement 
但是document.body.appendChild()和document.body.removeChild()却是可以用的,而且用document.documentElement.appendChild()和document.documentElement.removeChild()代替却会报错;

总结一下仅clientWidth、clientHeight、scrollLeft、scrollTop和document.documentElement.style时才用document.documentElement

3.加了这个标准以后IE的边框问题也出现了变化,现在和firefox趋于一致了,是不是这个就是XHTML的优点——跨浏览器的标准
上面提到:
设置一个div的CSS::{width:100px;height:100px;border:#000000 1px solid;}
IE中(正常情况):div的宽度(包括边框宽度):100px,div的高度(包括边框宽度):100px;
firefox(正常情况)::div的宽度(包括边框宽度):102px,div的高度(包括边框宽度):102px;

加了XHTML标准后的(IE和firefox打和了,^_^):
IE中(XHTML):div的宽度(包括边框宽度):102px,div的高度(包括边框宽度):102px;
firefox(XHTML)::div的宽度(包括边框宽度):102px,div的高度(包括边框宽度):102px;

(0)

相关推荐

  • 非常不错的关于IE与FireFox的js和css几处不同点[转自星火燎原]

    在蓝色上看到这篇文章的,感觉作者总结的不错,至少有些偶自己也没有真正的认识过.这些 东西的确是应该好好总结一下的,可惜偶这人比较懒,收藏整理于此,便于自己学习! 1.firefox不能对innerText支持. firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了.如果不用textContent,如果字符串里面不包含HTML代码也可以用innerHTML代替. 2.禁止选取网页内容: 在IE中一般用j

  • IE和FireFox(FF)中js和css的不同

    在IE和FireFox(FF)中js和css的不同 css: 1. ul标签中FF中有个padding值,却没有margin值,而在IE中正好相反 解决办法:将ul的padding和margin都设为0(也可以不是0)如:padding:0;margin:0;list-style:none; js: 1. IE中innerText在FF中没有,使用textContent; eg: 复制代码 代码如下: var obj=document.getElementById("_td"); va

  • firefox中JS读取XML文件

    firefox中JS读取XML文件 在网上搜"firefox中JS读取XML文件"的方法,找了半天,好多都是问了没人答的.看到一堆程序员在抱怨firefox:"除了累死程序员没什么好处.",言归正传.firefox不支持ie中的ActiveXObject对象,要得到一个XML DOM有以下2种方法:1.document.implementation.createDocument("", "", null);2.window.X

  • IE浏览器兼容Firefox的JS脚本的代码

    1.window.event兼容脚本 2.屏蔽Form提交事件 3.获取事件源 4.添加事件兼容写法 5.Firefox注册innerText写法 6.长度 7.父控件下的子控件 8.XmlHttp 1.window.event兼容脚本 function getEvent(){ //获取浏览器事件,同时兼容ie和ff的写法 if(document.all) return window.event; func=getEvent.caller; while(func!=null){ var arg0

  • 兼容IE与Firefox的js 复制代码

    function copyCode(id){ var testCode=document.getElementById(id).value; if(copy2Clipboard(testCode)!=false){ alert("生成的代码已经复制到粘贴板,你可以使用Ctrl+V 贴到需要的地方去了哦! "); } } copy2Clipboard=function(txt){ if(window.clipboardData){ window.clipboardData.clearDa

  • 在Firefox下js select标签点击无法弹出

    在项目中运用到了JQUERY UI,用到了其中的disableSelection()方法,这个方法是让页面上的指定元素无法通过鼠标拖拽进行选择. 由于某些需求,我在给div使用了此方法后,达到了上述效果,但是有不足的地方. 在Firefox下运用此方法后,div中的select方法点击之后将会无法弹出,在IE和CHROME下没有此现象.

  • window.event.keyCode兼容IE和Firefox实现js代码

    HTML代码 复制代码 代码如下: <input type="text" onkeydown="keyNumAll(event);" > Javascript 代码 复制代码 代码如下: function keyNumAll(evt){ //兼容IE和Firefox获得keyBoardEvent对象 evt = (evt) ? evt : ((window.event) ? window.event : ""); var key =

  • 兼容FireFox 的 js 日历 支持时间的获取

    复制代码 代码如下: var cal; var isFocus=false; //是否为焦点 var pickMode ={ "second":1, "minute":2, "hour":3, "day":4, "month":5, "year":6 }; var topY=0,leftX=0; //自定义定位偏移量 2007-02-11 由 寒羽枫添加 //选择日期 → 由 寒羽枫 2

  • [IE&FireFox兼容]JS对select操作

    今天在Ajax中使用两个下拉框动态添加select中的options,当我在IE测试下正常使用却在FireFox中不能正常使用,我对脚本也不是很熟悉,所以上网查了一下发现他们在动态添加option时有点不同. 下面把他记下来,说不定以后还可以用用: 动态删除select中的所有options:     function deleteAllOptions(sel){       sel.options.length=0;     } 动态删除select中的某一项option:     funct

  • 用js控制css的不错的方法

    #tabs UL {DISPLAY: inline; PADDING-LEFT: 0px; MARGIN-LEFT: 10px; WHITE-SPACE: nowrap} #tabs UL LI {BORDER-RIGHT: #999 1px solid; PADDING-RIGHT: 8px; BORDER-TOP: #999 1px solid; DISPLAY: inline; PADDING-LEFT: 12px; FONT-SIZE: x-small; BACKGROUND: #eee

随机推荐