[本文转自 ajaxbbs.net]
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;
分享到:
相关推荐
本示例主要关注的是使用CSS创建下拉菜单,并确保该菜单在不同的浏览器环境下,如IE6、IE7、IE8、Firefox和Chrome中都能正常工作。这是一项重要的任务,因为不同浏览器可能对CSS的解析和渲染存在差异,需要进行适当的...
这个代码的核心在于其跨浏览器兼容性,确保在多种主流浏览器上都能正常运行,包括老版本的Internet Explorer(IE6、IE7、IE8)以及Firefox、Opera和Chrome。下面我们将深入探讨这些知识点。 首先,我们来了解**QQ...
考虑到不同的浏览器对某些CSS和JavaScript特性支持程度不一,编写代码时需要确保在主要浏览器(如Chrome、Firefox、Safari、Edge和IE)中都能正常运行。可能需要引入polyfills或使用兼容性良好的库,如jQuery。 7....
由于不同的浏览器可能对某些CSS特性支持程度不同,我们需要使用浏览器前缀(如`-webkit-`、`-moz-`等)和适当的技术(如Autoprefixer工具)来确保在主流浏览器(如Chrome、Firefox、Safari、Edge和IE)上的兼容性。...
在JavaScript编程中,创建一个兼容Firefox(FF)和Internet Explorer(IE)的遮罩层是一项常见的需求,特别是在构建交互式Web应用或者需要弹出框、提示信息时。标题中的"超级爽的 js 遮罩层 谦容 FF IE 支持拖动...
2. **跨浏览器兼容性**:描述中提到的支持IE6、IE7和Firefox,意味着这些导航菜单需要在不同浏览器上保持一致的显示效果。这涉及到对CSS hack的理解和使用,如条件注释、浏览器特定前缀等,以确保在老版本浏览器中的...
- 不同浏览器(如IE和Firefox)的默认样式可能不同,需注意适配。 - 例如,页边距、列表缩进等的设置可能需要调整以保持一致性。 7. CSS Bug的原因: - 不同浏览器间CSS解析标准不统一。 - 各浏览器厂商的实现...
因此,开发者需要确保代码在IE9+、Chrome、Firefox、Safari和Edge等主流浏览器上表现一致。 9. **代码结构与优化**:良好的代码组织和优化可以提高页面性能。将样式和脚本分别放在CSS和JS文件中,避免内联样式和...
5. **浏览器兼容性**:描述中提到此弹出窗口兼容IE和Firefox等浏览器,这意味着开发者已经考虑了跨浏览器的兼容性问题。在JavaScript和CSS中,可能存在某些特性在不同浏览器中表现不一致,因此需要使用适当的...
然后,CSS可以与JavaScript协作,根据浏览器类型应用不同的样式。以下是一个简单的例子: ```javascript var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor); if(isChrome...
这种功能在各种浏览器中都需要保持良好的兼容性,包括IE、Firefox等主流浏览器。 首先,我们需要理解JavaScript(JS)是如何工作的。JavaScript是一种轻量级的解释型编程语言,主要在客户端运行,用于增强网页的...
常见的 JavaScript 兼容性问题包括:IE6、IE7、IE8、Firefox、Safari、Chrome 等。 JavaScript 执行流程 JavaScript 的执行流程可以分为三个阶段:解析、执行和垃圾回收。解析阶段是指浏览器将 JavaScript 代码...
- 兼容性处理:确保代码在不同浏览器(如IE、Firefox、Chrome等)上都能正常工作,可能需要使用条件语句或库如jQuery来处理浏览器差异。 - 拖动逻辑:使用事件监听和计算鼠标位置来更新元素的位置,同时处理边界...
通常,现代浏览器如Chrome、Firefox、Safari和Edge对这些特性支持良好,但旧版的IE可能需要额外的处理或使用polyfill库来确保兼容。 总结,CSS3的立体图片切换效果是通过结合`transform`、`transition`、`animation...
在IE6、IE7和火狐等不同浏览器上实现浮动代码的兼容性是一项挑战,因为这些浏览器对CSS和JavaScript的支持程度各不相同。例如,Internet Explorer 6和7对CSS标准的支持较弱,而火狐则相对较好。以下是一些关键的知识...
1. **CSS前缀**:不同浏览器对CSS3新特性的支持程度不一,如渐变、动画、盒模型等,需要添加相应的浏览器厂商前缀,如 `-webkit-`(Chrome/Safari)、`-moz-`(Firefox)、`-ms-`(IE)。 2. **JavaScript兼容性**...
前端工程师需要关注不同浏览器的渲染差异,例如WebKit(Safari、Chrome)、Presto(Opera)、Gecko(Firefox)和Trident(IE)。针对IE6的常见问题,如双边距BUG、浮动引起的3像素问题、Z-index问题等,需要使用特定...
它支持多种浏览器,包括Chrome、Firefox、Safari、Edge和IE9及以上版本。 2. jsPlumb提供了一系列API,可以方便地创建、修改和删除连接,以及自定义连接样式、端点样式和行为。 3. 库的核心功能包括动态连接、端点...
9. **浏览器测试与内核**:常见的浏览器如IE(Trident内核)、Firefox(Gecko内核)、Chrome和Safari(WebKit内核)、Opera(Presto内核)。 10. **IE6常见bug及解决方法**:包括双边距问题、3像素问题、超链接...
3. **浏览器兼容性**:为了确保在各种浏览器(如Chrome、Firefox、Safari、Edge和IE)上都能正常工作,我们需要关注CSS3特性和JavaScript的兼容性问题。例如,对于老版本的IE,可能需要使用`filter`属性替代`rgba()`...