新手学做网站需注意浏览器兼容性

  今天写一写关于新手做网站过程当中最经常遇到的问题之一:浏览器兼容性。事实上,这个问题不仅仅是新手学习的过程中会遇到,即使是资深的前端程序员,往往也会因为这个问题头疼不已。原因很简单,虽然W3C提出了一套标准,但是浏览器厂商往往不会完全按照标准来,这当中以微软为最奇葩的代表,每代IE都各有特点,问题也不仅仅存在于IE身上,其他浏览器也很难说自己就没有问题。作为最苦逼的前端开发者,对于这些问题就不得不注意了。

  浏览器兼容性问题主要来自于两个方面:css样式兼容性和javascript脚本兼容性,这点本站之前都有过文章简单的说了一下,也只能是简单的说了一下。这里面的问题之多,不是几百个字的文章能说得完的,网上有很多这类的博客,文章数往往多达数十篇,也未必能涵盖完全,我也只能简单的说一些原则性的注意点,可以帮助改善浏览器兼容性问题。

  css兼容性问题:浏览器的数量太多,我们只能针对内核来进行划分,这样主流的浏览器主要是三个内核:微软的trident内核、FF的mozilla内核、chrome为代表的webkit内核。其中微软又有问题就是IE6、7、8等等虽然是一个系列的内核,但对css的解释又存在不同。总体来说做浏览器兼容性测试只要测试通过了上述浏览器,一般问题就不大了。这里面被声讨最多的大概就是IE6了,微软的IE6也确实不愧是浏览器界的一朵奇葩,我自问大部分时候已经可以完全不依赖hack就做出IE7以上和FF以及webkit完美兼容的样式了,只有IE6还是会经常给我惊喜,所以要做IE6兼容就必须了解css hack,主要是专门针对ie6的“_”hack方式,因为只要你写得好点,其他的浏览器可以不用区分的,不用“*”,也不用!important,诀窍就是之前我写过的那篇新手css注意点中提到过的,以FF或者webkit作为基准来进行开发,这两个做出来的样式没有问题的情况下,IE7以上一般都不会有什么大问题,还有就是不要过分依赖浏览器自动处理,那个真的不靠谱,如果不是必要,不要采用自动高宽方式,尽量限制好页面内元素的高宽,这样可以最大限度的处理好css样式兼容性问题。

  javascript兼容性问题:这个也是个非常麻烦的问题来源,主要的问题依然来自于IE浏览器系列和其他浏览器的差别:IE调用的是系统组件,而其他浏览器调用的自己内建的组件,这就造成了你必须针对不同的浏览器调用不同的组件,最典型的方面莫过于ajax。但其他浏览器之间的问题也一样不少,我见过的问题就有:RGB值的表示方式的不同,offsetleft取出的值不同,还有前篇文章提到的readystate的解释不同等问题。javascript的问题有相当一部分可以靠一些脚本插件如jquery来改善,但要想做完善,需要针对不同浏览器进行详细的测试。

  本文只是针对浏览器兼容性的一个简单描述,大体上我所遇到的网页浏览器兼容性问题就来自这两方面了,如果你遇到了同样的问题,不妨参照本文的思路进行排查,当然更多的还是需要靠经验的积累。

  本文有优淘居http://www.utaoju.com发表,转载请带链接

时间: 2024-10-25 21:37:00

新手学做网站需注意浏览器兼容性的相关文章

win8PC浏览器兼容性抽查测试

  对于软件的Win8兼容性测试,测试的根本就在于反映出在用户使用Windows平台的软 件,在最新的Win8操作系统中普遍的兼容能力.也就是说我们需要从人们最常用和最实用的软件入手,而浏览器相信是任何平台都无法或缺的最常用.实用的软 件之一.因此测试PC浏览器的兼容问题是一个比较具有普遍代表性的方向.这里我们从众多的浏览器中抽查其中三款PC浏览器软件,并关注一下它们的兼容性表现. 浏览器就是可以显示网页服务器或者文件系统的HTML文件内容,并让用户与这些文件交互的一种软件.网页浏览器用来显示在

Firefox浏览器兼容性检测工具:Compatibility Detector

文章描述:Firefox下的浏览器兼容性检测工具--Compatibility Detector. 这里给大家推荐一个Firefox下的浏览器兼容性检测工具--Compatibility Detector.这个工具对于新手来说是非常不错的一个东东,下面我就简单说下它的优点. 作为一个前端开发者来说,最痛苦的事情之一就是要兼容现在各种五花八门的浏览器,而在实际的调试中这个调试过程又是让人劳心劳力.而Compatibility Detector能把目前很多已知的兼容性问题很easy的展现在我们面前.

【前端】浏览器兼容问题都有哪些,通常怎么解决浏览器兼容性问题

问题描述 [前端]浏览器兼容问题都有哪些,通常怎么解决浏览器兼容性问题 正在学习前端,看到一个新词叫浏览器兼容性,请问浏览器兼容性问题一般都有哪些呢?通常怎么解决这些问题呢? xiexie~~ 解决方案 感觉可以划分为两个问题吧:1.因为标准在提升老旧的浏览器可能不支持html5和css3导致兼容性问题.解决方式:考虑业务支持环境尽可能的以最低版本浏览器进行Bug测试.2.浏览器内核差异最值得吐槽的是IE浏览器和别的很多浏览器都不一样举个例子: <body> <a href="

浏览器兼容性问题大汇总_javascript技巧

JavaScript 1.HTML对象获取问题 FireFox:document.getElementById("idName"); ie:document.idname或者document.getElementById("idName"). 解决办法:统一使用document.getElementById("idName"); 2.const问题 说明:Firefox下,可以使用const关键字或var关键字来定义常量; IE下,只能使用var

JavaScript 浏览器兼容性总结及常用浏览器兼容性分析_javascript技巧

1. children与childNodes IE提供的children.childNodes和firefox下的childNodes的行为是有区别的,firefox下childNodes会把换行和空白字符都算作父节点的子节点,而IE的childNodes和children不会.比如: <div id="dd"> <div>yizhu2000</div> </div> d为dd的div在IE下用childNodes查看,其子节点数为1,而

Javascript 多浏览器兼容性问题及解决方案_javascript技巧

CSS 多浏览器兼容性问题及解决方案 一.document.formName.item("itemName") 问题 问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]:Firefox 下,只能使用document.formName.elements["elementName"]. 解决方法:

css与javascript跨浏览器兼容性总结_javascript技巧

本文以大量实例形式总结了css与javascript跨浏览器的兼容性问题.分享给大家供大家参考.具体总结如下: 一.CSS样式兼容性 1. FLOAT闭合(clearing float) 网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合,这也是div无法自适应高度的一个原因.如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV,这种情况一般出现在一个父DIV下包含多个子DIV.解决办法: 1) 给父DIV也设上float 2) 在

JavaScript中解决多浏览器兼容性23个问题的快速解决方法_javascript技巧

一.document.formName.item("itemName") 问题 问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]:Firefox 下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formNa

Web字体格式介绍及浏览器兼容性一览

目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字体逐渐成为话题,这项让未来Web更加丰富多彩的技术拥有多种实现方案,其中之一是通过@font-face属性在网页中嵌入自定义字体,主流的浏览器都支持这项技术,本文介绍主要的几种Web字体格式及各浏览器兼容情况. Web字体格式介绍TrueType (.ttf) Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理,保证了屏幕与打印输