非常不错的关于IE与FireFox的js和css几处不同点[转自星火燎原]_ Div+Css教程-查字典教程网
非常不错的关于IE与FireFox的js和css几处不同点[转自星火燎原]
非常不错的关于IE与FireFox的js和css几处不同点[转自星火燎原]
发布时间:2016-12-29 来源:查字典编辑
摘要:在蓝色上看到这篇文章的,感觉作者总结的不错,至少有些偶自己也没有真正的认识过。这些东西的确是应该好好总结一下的,可惜偶这人比较懒,收藏整理于...

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

1.firefox不能对innerText支持。

firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了。如果不用textContent,如果字符串里面不包含HTML代码也可以用innerHTML代替。

2.禁止选取网页内容:

在IE中一般用js:obj.onselectstart=function(){returnfalse;}

而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:#0000001pxsolid;}

IE中:div的宽度(包括边框宽度):100px,div的高度(包括边框宽度):100px;

而firefox:div的宽度(包括边框宽度):102px,div的高度(包括边框宽度):102px;

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

一.判断浏览器类型:

varisIE=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标准了<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//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:#0000001pxsolid;}

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;

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类