- 浏览: 218880 次
- 性别:
- 来自: 重庆
文章分类
最新评论
-
husw:
不错,感谢分享!
fixed仿淘宝工具栏效果(两种) -
08tankuai:
试了一下!还不错,谢谢。
利用CSS让容器的溢出部分内容隐藏起来,smarty就可以不用截取字符串了 -
m2maomao:
yxyysu 写道明 白 了。恩,非常easy的。
让框架Frameset居中,并且固定宽度的巧妙办法 -
yxyysu:
明 白 了。
让框架Frameset居中,并且固定宽度的巧妙办法 -
yxyysu:
楼主,这段代码是什么意思呢?
为什么能出现这样的效果呢?
让框架Frameset居中,并且固定宽度的巧妙办法
IE和Firefox浏览器下javascript、CSS兼容性研究
- 博客分类:
- Html/Css
- Javascript
为了将公司的产品在IE和Firefox下达到兼容,前段时间做了如下研究。由于之前准备的就是英文文档,我也懒得再翻译成中文了,呵呵。
首先你要在每个页面执行javascript之前引入下面这个我做好的兼容文件。
1. obj.firstChild/.lastChild/.nextSibling/.childNodes/.previousSibling should be changed.
2. Assign a property “id” to HTML element if it miss “id”
3. Keep parameters case-sensitive between file.js and file.cs
4. Using getElementById(objId) to get a object instead of eval(objId)
5. Add <tr> between <thead>and<th>
6. Change aRows(i).cells to aRows[i].cells
7. Using standard way to get/set customized value
8. Using standard way to remove an option.
9. Firefox doesn’t support Expression in style file.
10. Change the event onmouseleave() to onmouseout()
11. Change obj.fireEvent(eventname) to fireEvent(obj,eventname)
12. Don’t use the command document.readyState!="complete"
13. Don’t use window.createPopup()
14. Change document.body.scrollLeft to document.documentElement.scrollLeft
15. Firefox dosen’t support filter property
16. Add a postfix ‘px’ to specify the width/height or position
17. Change style=”cursor:hander” to style=”cursor:pointer”
18. Don’t forget propertys “title” and “alt” for img element
19. FireFox do not support the style “display:block” into <tr>
20. Don’t forget setting opacity for firefox
21. Have browsers IE and FireFox compatible in .css
Some functions exist in IE and Firefox, but they might implement different functionality, you can change them into our predefined function in SalIEFirefox.js.
Not compatible:
var wrongGet = obj.firstChild ;
var wrongGet = obj.lastChild ;
var wrongGet = obj.nextSibling ;
var wrongGet = obj.childNodes ;
var wrongGet = obj.previousSibling ;
Compatible
var rightGet = getFirstChild (obj)
var rightGet = getLastChild (obj)
var rightGet = getNextSibling (obj)
var rightGet = getChildNodes (obj)
var rightGet = getPreviousSibling (obj)
Add “id” for every HTML element, because if there is only “name” for HTML element, IE will assign the “name” value to “id”, but Firefox will not.
Not compatible:
tmpHtml.Append("<input type=/"text/" name=/"" + str1 + "/" value=/"0/">" );
Compatible:
tmpHtml.Append("<input type=/"text/" name=/"" + str1 + "/" id=/"" + str1 + "/" value=/"0/">" );
It is case-sensitive for HTML element’s id and any parameter in Firefox
Not compatible:
.js var tableDrag= document.getElementById(SectionId+"_dataTable" );
.cs sbdTempHtml.Append("<table id=/"" + SectionId + "_datatable /">" );
Compatible:
.js var tableDrag= document.getElementById(SectionId+"_dataTable" );
.cs sbdTempHtml.Append("<table id=/"" + SectionId + "_dataTable /">" );
Don’t use “eval” to cast a string to Object, in other words, using GetElementById(strObjId) instead of eval(strObjId)
Not compatible:
objField1 = eval ("document.mainform.meritid" + i);
Compatible:
objField1 = document.getElementById ("document.mainform.meritid" + i);
You should be careful of the following:
Compatible:
var objAjax = eval ("SalaryCom.CompPlanner.CppElementScripts." + document.mainform.aaa.value);
Add <tr> between <thead>and<th>, because in IE it will auto add <tr> for it, but Firefox will not. Then when you are trying to get some element using obj.parentNode() might be different.
Not compatible:
sbdTempHtml.Append("<table>" );
sbdTempHtml.Append("<thead>" );
sbdTempHtml.Append("<th width=/"100/">test field name 1</th>" );
sbdTempHtml.Append("<th width=/"200/">test field name 2</th>" );
sbdTempHtml.Append("</thead>" );
sbdTempHtml.Append("<table>" );
Compatible:
sbdTempHtml.Append("<table>" );
sbdTempHtml.Append("<thead>" );
sbdTempHtml.Append("<tr>" );
sbdTempHtml.Append("<th width=/"100/">test field name 1</th>" );
sbdTempHtml.Append("<th width=/"200/">test field name 2</th>" );
sbdTempHtml.Append("</tr>" );
sbdTempHtml.Append("</thead>" );
sbdTempHtml.Append("<table>" );
Not compatible:
aRows(i) .cells
Compatible:
aRows[i] .cells
Using the following standard way to get/set customized value for HTML element.
Not compatible:
var str = Obj.customizedvalue ;
Compatible:
var str = Obj.getAttribute( “ customizedvalue ”) ;
Using the following standard way to remove an option in selected element.
Not compatible:
oSel.options.remove (oSel.selectedIndex);
Compatible:
oSel.remove (oSel.selectedIndex);
Not compatible:
top : expression (parentNode.parentNode.parentNode.parentNode.scrollTop) ;
width :expression (document.getElementById('CenterDIV').offsetWidth-16+'px') ;
Compatible:
Consider to use JS method instead of using expression in css.
There is no event of onmouseleave() in Firefox, you should change it to onmouseout(),but be careful to change it like following
Not compatible:
div.attachEvent("onmouseleave" ,new Function("clearPopUpMenu();" ));
Compatible:
div.attachEvent("onmouseout" ,new Function("clearPopUpMenu();" ));
There is no method obj.fireEvent() in Firefox, you should change it to following:
Not compatible:
div.fireEvent( "onscroll");
Compatible:
fireEvent(div, "onscroll");
Firefox doesn’t support this command document.readyState!="complete"
Not compatible:
if (document.readyState!="complete" )
Don’t use window.createPopup() method to create a popup window.
Not compatible:
window.createPopup();
There are some differences between body.scrollLeft and other HTML element(documentElement.scrollLeft), you should care about it.
Not compatible:
var _left = document.body.scrollLeft;
Compatible:
var _left = document.documentElement.scrollLeft;
you should be careful of the following propertys which should be also applied in:
scrollHeight|scrollLeft|scrollTop|scrollWidth
A file Cppu_ColorGradient.js can resolve the problem, include the file in Cppb_Header.ascx.cs and do something such as set classname and get client color and so on…
Not compatible:
document.GetElementById(strObjId).style.width = 10;
Compatible:
document.GetElementById(strObjId).style.width = ‘10px’;
you should be careful of the following propertys which should be also applied in (you can ignore if it is a read only property).
width|height|right|left|scrollHeight|scrollWidth|scrollLeft|scrollTop|offsetHeight|offsetWidth|offsetLeft|offsetTop|clientHeight|clientWidth|clientLeft|clientTop|lineHeight|lineWidth
Not compatible:
Compatible:
style=”cursor:pointer ”
You should assign “title” and “alt” property for img element. Because it will atuo assign “alt” value to “title” property in IE, while it will not in Firefox.
Not compatible:
sbdTempHtml.Append("<img src=/"../Graphics/i_expand.gif/" /></div>" );
Compatible:
sbdTempHtml.Append("<img alt=/"/" title=/"/" src=/"../Graphics/i_expand.gif/" /></div>" );
we are using display:block on tr tag which is not correct in Firefox. After applying display:block, the layout of the table is broken. The default style for tr in Firefox should be ‘display:table-row’
Not compatible:
document.getElementById("hrmtr" ).style.display = "block" ;
Compatible:
if (window.isIE)
document.getElementById("hrmtr" ).style.display = "block" ;
else
document.getElementById("hrmtr" ).style.display = "" ;
It is only applied in IE if you set opacity as “filter:alpha(opacity=50);”,
Not compatible:
filter :alpha(opacity=50) ;
Compatible:
filter :alpha(opacity=50) ;
-moz-opacity :0.5 ; /*css*/
/*The way in js*/
if (!window.isIE)
obj.style.MozOpacity = 0.5;
If you want to have browsers IE & FireFox compatible in .css, you should copy a line and prefixed “*”, and the line must be under the original line, then Firefox is hight priority automatically, IE will ignore it and only process a line prefixed “*”.
Not compatible:
margin :10px ;
Compatible:
margin :20px ; /*for firefox*/
*margin :10px ; /*for ie7,ie6 */
发表评论
-
Javascript 严格模式详解
2015-11-10 11:32 443一、概述 除了正常运 ... -
Javascript 装载和执行
2015-09-17 14:17 481一两个月前在淘宝内网里看到一个优化Javascript代码的 ... -
IE6、7下li元素的子元素为dl,ul,ol时产生的bug
2015-09-15 14:54 564话不多说,先看测试代码: 该段代码在标准浏览器(包括 ... -
Web前端开发和JS面向对象编程分享 一、前端开发的重要性 1. Web2.0、AJAX、JSON、用户体验 2. HTML5、微网、移动互联网
2015-09-15 11:20 1481Web前端开发和JS面向对象编程分享 一、前端 ... -
网格(UED所谓栅格化)方案生成器
2015-09-03 14:30 481本文转载于:http://www.tw ... -
让wamp本地测试WordPress支持自定义固定链接
2014-02-19 19:32 617让wamp本地测试WordPress支持自定义 ... -
背景拉伸平铺
2013-09-13 15:28 688现在WEB页面设计比较流行使用大背景图,那么您知道如何使用一 ... -
CSS强制性换行
2013-08-19 17:31 580一般情况下,元素拥有默认的white-space:norm ... -
JS复制内容(兼容IE和Firefox)
2012-11-05 11:46 878// <![CDATA[ function copy_ ... -
自己写的美女瀑布流分享一下
2012-08-01 16:32 610<!DOCTYPE HTML PUBLIC " ... -
fixed仿淘宝工具栏效果(两种)
2012-08-01 15:59 1637看到有人正在找这个效果,而我正好也在研究,所以发上来,共享一下 ... -
javascript深入理解js闭包,js 闭包
2012-05-28 23:20 689一、变量的作用域 要理解闭包,首先必须理解Javascrip ... -
做CSS固定窗口发现IE6下不兼容,下面是解决position:fixed在IE6下不兼容的方法
2012-05-17 16:18 990写道 .fixed-top /* 头部固定 */{ ... -
去掉链接(包括图片链接)的虚线边框
2012-05-08 09:47 663/* for IE */ a,area { blr: ... -
chrome,safari,firefox,ie6.ie7,ie8,ie9各浏览器CSS Hack总结
2012-05-04 08:20 1520这个浏览器百花齐放的时代,身为一名前端开发人员,我想最头痛的就 ... -
1024下网页宽度标准(网络摘抄)
2012-04-29 21:24 807研究网页栅格系统前,来看一组数据: 网站 首页页面宽度 p ... -
完美解决IE6不支持position:fixed的bug
2012-04-28 16:50 771废话不多说,先看一下下面这段代码: ? ... -
基于jQuery的控制左右滚动及自动滚动效果
2012-04-27 17:17 805迷上jQuery,相对于原生JavaScript,它是如此 ... -
CSS实现将div固定在页面指定地方
2012-04-24 17:21 907用一个div作为提示信息或者与用户交互的层控件, ... -
如何通过CSS实现div的固定位置,不随页面滚动消失
2012-04-24 16:56 1381每个 Web Developer / Designer 都知道 ...
相关推荐
IE和Firefox在css,JavaScript方面的兼容性
javascript和css在IE和Firefox中的不同点及解决兼容性的方案,一共有二十五点
javascript和css在IE和Firefox中的不同点
我们讨论的主题CSS网页布局,最令大家头疼的问题就是浏览器兼容性,虽然jb51.net介绍过很多这方向的知识,但依然让很多开发人员晕头转向,今天的这篇文章,将列出css和javascript在IE和Firefox中二十三个不同点,...
主要介绍了css与javascript跨浏览器兼容性,包括常见的css兼容性问题与javascript兼容性问题,以及IE与Firefox等常用浏览器的兼容性分析,需要的朋友可以参考下
IE与FF的兼容问题 IE浏览器和火狐浏览器兼容问题——CSS篇 IE浏览器和Firefox(火狐)浏览器兼容性——Javascript篇
我们讨论的主题CSS网页布局,最令大家头疼的问题就是浏览器兼容性,虽然52CSS.com介绍过很多这方向的知识,但依然让很多开发人员晕头转向,今天的这篇文章,将列出css和javascript在IE和Firefox中二十三个不同点,...
javascript+CSS版本贪吃蛇,兼容性没做处理,火狐、IE11下可以,其他版本没有测试
这篇文章给大家带来《五大主流浏览器 HTML5 和 CSS3 兼容性大比拼》,让我们一起来看看2013年的浏览器现状。 浏览器厂商之间的竞争促使各大浏览器对 HTML5 和 CSS3 的支持越来越完善,下面的图表列...
作为一个Web前端工作者,你...我将在下面列举部份Dom指令在IE和FireFox等浏览器 不兼容性的问题!限于篇幅.我不在该页对提到的Dom指令做详细解释.请点击相关指令名称可以了解详细解释与实例.在使用JavaScript获取触
今天在使用CSS属性的时候发现"cursor:hand;"在Firefox中鼠标不会变为手型,后来上网搜索了一下资料,发现hand这个cursor属性在Firrefox中不兼容,使用"cursor:pointer"就都可以显示了。
CSS 多浏览器兼容性问题及解决方案一、document.formName.item(”itemName”) 问题 问题说明:IE下,可以使用 document.formName.item(”itemName”) 或 document.formName.elements [“elementName”];Firefox 下...
但是在Firefox、chrome和IE8+以上的浏览器上,都是显示正常的。 问题的分析 1. 检查了一些Javascript框架,标准的jquery类库1.x系列,确认其工作正常,问题不是在于Javascript方面。 2. 排查掉HTML标签内容的...
JavaScript 1.HTML对象获取问题 FireFox:document.getElementById(“idName”); ie:document.idname或者document.getElementById(“idName”). 解决办法:统一使用document.getElementById(“idName”); 2....
包括:11种用javascript做的刷新按钮的方法、40种Javascript中常用的使用小技巧、Javascript的IE和Firefox兼容性汇编、JavaScript函数大全、JavaScript实际应用:innerHTMl和确认提示的使用、 CSS的常用技巧、IP地址...
这一Netscape 4 DOM是革新的尽头,它只被Netscape 4支持,并且在由Netscape代码基础上扩展而来的Mozilla和Firefox浏览器中也被抛弃了。对Netscape 4 DOM的介绍也从本书的这一版本中删除掉了。 本章的大部分内容介绍...
我最终进一步研究了跨浏览器的兼容性问题,而FireFox的问题与Safari相同。 我还必须考虑到它,然后必须重新调整Safari转换属性。 为了安全起见,我最终将-moz和-webkit添加到所有转换和转换中。 mozTransform也已...