web产品浏览器兼容性问题你有考虑到吗?

  通常,动态网页除了Server端的代码撰写Client端代码也必须下不少工夫。例如:表单提交前的数据验证、图片的轮播、菜单的收合等等。

  因此,对于Client端是否能正常执行指令码也必须适当的考察,然而目前浏览器的种类繁多,对Java代码的解读也不同;所以如何撰写出能在大部份浏览器上正常执行的指令码是非常重要的,否则网页的跨平台性将会大打折扣。

  以目前较多人使用的IE及FireFox来说,有些指令码其实并不通用,所以在程序的撰写上必须要多加注意,因此有时候得视情况撰写替代的代码以增加兼容性。

  举例来说:

  指令:document.getElementsByName(“myID”)

  作用:找出所有ID=“myID”的元素遵回传Array

  虽然此一指令能够在IE上正常执行,但是到了FireFox上却是一点用也没有。

  因此,可以考虑将这些元素的ID额外加上编号x(x代表任意数字),然后在网页加载后,再使用document.getElementById(“myID_x”)将各个元素一一存进一个Array。

  属性:e.innerText

  作用:存取元素的文字内容

  在IE上,可以使用e.innerText =“测试内文”;来指定元素e的内容;但是在FireFox上,innerText这个属性却没办法正常使用。

  所幸还有一个属性innerHTML可以在两者正常执行,因此应该尽量使用innerHTML来替代innerText。

  参数:

  说明:tbCell为table的cell元素、tbRow为table的row元素

  下列指令码是在row元素中,插入一个cell元素,index为插入位置

  tbCell =tbRow.insertCell();//IE执行正常、FireFox则否

  tbCell =tbRow.insertCell(index);//IE、FireFox皆正常

  对于常使用Client端指令码来产生动态产生元素的程序员而言,选择较高兼容性的指令码来撰写虽然比较费时;但是至少能够确保大部份的使用者都能正常显示、操作,也能减少许多因为兼容性而衍生出来的问题。

时间: 2024-11-05 18:29:51

web产品浏览器兼容性问题你有考虑到吗?的相关文章

web前端浏览器兼容性问题

首先,为什么会出现浏览器兼容性问题呢?因为不同浏览器使用内核及所支持的HTML(标准通用标记语言下的一个应用)等网页语言标准不同:以及用户客户端的环境不同(如分辨率不同)造成的显示效果不能达到理想效果.最常见的问题就是网页元素位置混乱,错位.不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 首先大家可以

Web前端浏览器兼容性个人经验总结

前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端一起搞的同学,小生2年前就这种状态,鼓励人家用ie6....) 我要遵循标准,我只要ff就好,IE就是坑爹的玩意,我不必去理他(小生一年前的心态...) 现在看来,之前的想法都是不对的,我们诚然应该追求最新的浏览器使用最新的技术,但是渐进增强,向后兼容的思想一定要有, 因为就现在IE6在中国的份额

web前端-浏览器兼容性处理大全

1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两 上下排列或嵌套的div,上面的div设置高度(height),如果div里的实际内容大于所设高度,在FF中会出现两个div重叠的现象:但在IE 中,下面的div会自动给上面的div让出空间所以为避免出现层的重叠,高度一定要控制恰当,或者干脆不写高度,让他自动调节,比较好的方法是 height:100%;但当这个div里面一级的元素都float了的时候,则需要在div

Web前端浏览器兼容性问题及解决方案

常见的兼容性问题:1.不同浏览器的标签默认的外边距( margin )和内边距(padding)不同解决方案: css 里增加通配符 * { margin: 0; padding: 0; } 2.IE6双边距问题:在 IE6中设置了float , 同时又设置margin , 就会出现边距问题解决方案:设置display:inline; 3.当标签的高度设置小于10px,在IE6.IE7中会超出自己设置的高度解决方案:超出高度的标签设置overflow:hidden,或者设置line-height

web前端开发的浏览器兼容性

首先我们来看一下目前市面上常见的一些浏览器:ie.chrome.firefox.safari.opera.maxthon.360.qq.yy.uc.sogou.2345.淘宝.猎豹.世界之窗等 其中表现很出色的有chrome.firefox.safari等:而表现极差的就是ie6/7内核浏览器了,我们的兼容性工作大半都是围绕这两个浏览器内核展开 我们的常规处理方式是调试各浏览器网页显示效果.使用成熟的前端开发框架.运用css与hack技巧等 常见hack技巧 css _:ie6内核浏览器识别 c

WEB前端测试浏览器兼容性的娃有福了!

今天调试前端的一个js效果,在其它浏览器上都正常,本人的IE11也正常,但是同事的IE8下就不正常,于是楼主只能去找第三方软件了.先用的微软的Microsoft Expression SuperPreview4,但是它只能看静态页面,运行不了JS,于是只能去用IETester(楼主以前用过IETester,不太好用,经常崩溃).在IETester下试了,居然还是正常的,楼主瞬间凌乱了,不只如何下手了,只能再去找度娘了.在一篇帖子中看到一个好办法,真心好啊,楼主以前居然都没发现,贴图如下: 在IE

Web浏览器兼容性测试工具如何选择

对于前端开发工程师来说,网页兼容性测试工程师而言,确保代码在各种主流浏览器的各个版本中都能正常工作是件很费时的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,领测软件测试网向您推荐12款很棒的浏览器兼容性测试工具让我们一起看看这些很棒的工具吧. Spoon Browser Sandbox 点击你需要测试的浏览器环境,安装插件就可以进行测试了.帮助你测试网页在Safari.Chrome.Firefox和Opera浏览器中是否正常,IE以前也有的,网站上说应微软的要求去掉了. Super

Web前段开发人员须知的常见浏览器兼容性问题及解决技巧

为什么会有兼容性问题? 由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要做好浏览器兼容. 使用Trident内核的浏览器:IE.Maxthon.TT: 使用Gecko内核的浏览器:Netcape6及以上版本.FireFox: 使用Presto内核的浏览器:Opera7及以上版本: 使用Webkit内核的浏览器:Safari.Chrome. 而我现在所说的兼容性问题,

常见的浏览器兼容性问题大汇总

常见的浏览器兼容性问题大汇总 1 ie6.0横向margin加倍 产生因素:块属性.float.有横向margin. 解决方法:display:inline: 2 ie6.0下默认有行高 解决方法:overflow:hidden;或font-size:0;或line-height:xx px: 3 在各个浏览器下img有空隙(原因是:回车.) 解决方法:让图片浮动. 4 一个父标签与几个子标签嵌套,父标签不浮动,子标签float,子标签不撑开父的高度. 解决方法:a 在子标签最后清浮动{<div