IE和Firefox浏览器下js 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)

Assign a property “id” to HTML element if it miss “id”

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/">" );

Keep parameters case-sensitive between file.js and file.cs

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 /">" );

Using getElementById(objId) to get a object instead of eval(objId)

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>

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>" );

Change aRows(i).cells to aRows[i].cells

Not compatible:

aRows(i) .cells

Compatible:

aRows[i] .cells

Using standard way to get/set customized value

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 standard way to remove an option.

Using the following standard way to remove an option in selected element.

Not compatible:

oSel.options.remove (oSel.selectedIndex);

Compatible:

oSel.remove (oSel.selectedIndex);

Firefox doesn’t support Expression in style file.

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.

Change the event onmouseleave() to onmouseout()

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();" ));

Change obj.fireEvent(eventname) to fireEvent(obj,eventname)

There is no method obj.fireEvent() in Firefox, you should change it to following:

Not compatible:

div.fireEvent( "onscroll");

Compatible:

fireEvent(div, "onscroll");

Don’t use the command document.readyState!="complete"

Firefox doesn’t support this command document.readyState!="complete"

Not compatible:

if (document.readyState!="complete" )

Don’t use window.createPopup()

Don’t use window.createPopup() method to create a popup window.

Not compatible:

window.createPopup();

Change document.body.scrollLeft to document.documentElement.scrollLeft

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

Firefox dosen’t support filter property

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…

Add a postfix ‘px’ to specify the width/height or position

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).

Change style=”cursor:hander” to style=”cursor:pointer”

Not compatible:

style=”cursor:hander [k1]  ”

Compatible:

style=”cursor:pointer ”

Don’t forget propertys “title” and “alt” for img element

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>" );

FireFox do not support the style “display:block” into <tr>

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 = "" ;

Don’t forget setting opacity for firefox

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;

Have browsers IE and FireFox compatible in .css

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 */

本文链接：https://blog.csdn.net/senvenfootgao/article/details/84008627

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

java获得当前时间一小时前的时间_java获取当前时间前1h-程序员宅基地

文章浏览阅读2.1w次，点赞4次，收藏9次。Calendar calendar = Calendar.getInstance(); calendar.setTime(new Date()); calendar.set(Calendar.HOUR, calendar.get(Calendar.HOUR) - 1);// 让日期加1 System.out.println(calendar.get(Calendar.D_java获取当前时间前1h

生成模型在计算机视觉、自然语言处理、推荐系统中的应用和研究_父母基因怎么组合-程序员宅基地

文章浏览阅读1.1k次。随着计算机的飞速发展，人工智能技术的逐渐成熟，越来越多的人开始关注这个新兴的领域，开始开发出新的产品和服务。在这个信息爆炸的时代，数据量的呈几何级增长，需要人们对海量数据的分析、处理和决策，而机器学习就是人工智能的一个重要组成部分。从传统的统计学习到深度学习（如卷积神经网络CNN），人工智能技术不断的进步，已经引起了很大的社会影响。在这个过程中，生成模型是一个非常重要的工具，它可以用来帮助理解复杂的数据集。通过训练一个生成模型，可以从父亲的基因中产生出一个系列可能的孩子的基因序列，_父母基因怎么组合

virtuoso 后仿 ADE L error_后仿真 referencing an undefined model or subcircuit-程序员宅基地

文章浏览阅读470次。解决办法：在model library添加dio_tt的model。原因：model library 没设置二极管的model。ADE后仿时出现error。_后仿真 referencing an undefined model or subcircuit

深度学习笔记——pytorch实现双向GRU（BiGRU）-程序员宅基地

文章浏览阅读1k次，点赞12次，收藏16次。参考视频。_双向gru

东方博宜OJ答案（1011~1020）_东方博宜oj答案1062-程序员宅基地

文章浏览阅读926次，点赞12次，收藏8次。欢迎大家能看到我的文章，这篇文章收录了东方博宜OJ 1011~1020所有题目的答案，后续还会往后出，敬请关注！如遇不足，欢迎指出！（不要喷我┭┮﹏┭┮）_东方博宜oj答案1062

电子设计教程49：1616LED点阵屏驱动-74HC595的原理_1616点阵引脚-程序员宅基地

文章浏览阅读6.9k次，点赞12次，收藏60次。我尝试通过移位寄存器级联+三八译码器，实现用3跟控制线，驱动16*16LED点阵屏的效果。这是第一篇博客，讲述74HC595芯片的工作原理一般情况下，使用单片机来控制LED。一个引脚，控制一个LED，是最直观的方法。但也是最笨的方法。引脚对于单片机来说是珍贵的资源，同样性能的芯片引脚越多，价格就越贵。然而有些外设会占用很多引脚，例如LED屏幕。理论上来讲，一个LED需要一个引脚来操作，64个LED组成8×8屏幕，就需要多达64个引脚。但聪明的工程师会节省引脚，把LED按照行列连接，形成矩阵，只需要_16*16点阵引脚

随便推点

面试阿里 P6，过关斩将直通 2 面，结果 3 面找了个架构师来吊打我_阿里p6二面-程序员宅基地

文章浏览阅读984次，点赞2次，收藏4次。前言人人都有大厂梦，对于程序员来说，BAT 为首的一线互联网公司肯定是自己的心仪对象，毕竟能到这些大厂工作，不仅薪资高待遇好，而且能力技术都能够得到提升，最关键的是还能够给自己镀上一层金，让人瞻仰。同样的，小编的好朋友的个人目标也是阿里，但之前一直在一家小公司，一呆就是好几年，现在通过不断学习和实践，提升了自己很多，也有了信心来阿里挑战。下面，就是朋友分享的这次面试阿里 P6 的一些经历和心得。阿里 P6 岗面试经历这次阿里的面试经历实朋友说实在是在太紧张+刺激+尴尬了，面试前还自信_阿里p6二面

开关稳压器详解（四）－Buck降压型开关稳压器自举电路_自举驱动的buck电路-程序员宅基地

文章浏览阅读8.9k次，点赞12次，收藏121次。在Buck开关中,常使用N-MOS管作为功率开关管。相比于P-MOS,N-MOS具有导通电阻低价格便宜且流过电流较大等优势。在同步结构中对于开关管的使用一般有两种方式：上管为P-MOS,下管为N-MOS；无需外部自举电路上下管均为N-MOS；需要外部自举电路从上图可知，由于N-MOS导通条件是栅极电压比源极电压高。对于上管而言必须增加自举电路才能保证上管完全导通。下面就介绍下自举电路..._自举驱动的buck电路

YOLOv4 介绍及其模型优化方法-程序员宅基地

文章浏览阅读2.2k次。YOLOv4 介绍及其模型优化方法一、YOLOv4 介绍2020 年 4 月，YOLOv4 在悄无声息中重磅发布，在目标检测领域引起广泛的讨论。在 YOLO 系列的原作者 Joseph R..._yolo模型剪枝和蒸馏

Android Native Crash 收集(1)-程序员宅基地

文章浏览阅读617次，点赞27次，收藏21次。感觉现在好多人都在说什么安卓快凉了，工作越来越难找了。又是说什么程序员中年危机啥的，为啥我这年近30的老农根本没有这种感觉，反倒觉得那些贩卖焦虑的都是瞎j8扯谈。当然，职业危机意识确实是要有的，但根本没到那种草木皆兵的地步好吗？Android凉了都是弱者的借口和说辞。虽然 Android 没有前几年火热了，已经过去了会四大组件就能找到高薪职位的时代了。

bootstrap-fileinput后端接收不到数据_动态人像抓拍比对系统架构（前端抓拍+网络传输+后端视频解析）...-程序员宅基地

文章浏览阅读103次。动态人像抓拍比对系统由前端人脸抓拍采集子系统、网络传输子系统和后端解析管理子系统组成，实现对通行人脸信息的采集、传输、处理、分析与集中管理。系统中，前端人脸采集设备负责人脸图像的采集，接入服务器主要实现图片及信息的接收和转发功能，可为多种型号、多个厂家的抓拍机提供统一接入服务，接收到的抓拍图片存入云存储单元，并由人脸结构化分析服务器对抓拍的视频及图像进行建模以及黑名单实时比对报警，建模得到的人脸信..._bootstrap fileinput request.form.files获取不到

抖音seo矩阵系统源码搭建步骤分享_云索seo矩阵系统-程序员宅基地

文章浏览阅读115次。抖音SEO矩阵系统是基于抖音平台的搜索引擎优化技术的一种系统，其主要作用是通过一系列的技术手段，提高抖音视频的曝光和排名，使其获得更多的流量和粉丝。在本文中，我们将介绍抖音SEO矩阵系统的开发技术，包括系统设计、代码实现等方面。将源码上传到服务器上，并修改相关配置参数，包括数据库连接参数、域名配置、后台管理员账号等。从公开的代码托管网站上下载抖音SEO账号矩阵系统的源码，例如Github、码云等。将配置好的源码部署到Nginx服务器上，并设置网站的根目录指向源码的入口文件。并在网站上购买一个域名。_云索seo矩阵系统