- 浏览: 11100 次
- 性别:
- 来自: 杭州
最新评论
-
jdhh_hcm:
qingming.com 写道如果类型相同,可不可以用数组的名 ...
如何消除数组里面重复的元素(一道我经历过的JS面试题) -
qingming.com:
如果类型相同,可不可以用数组的名字存取法,相当于hash表。& ...
如何消除数组里面重复的元素(一道我经历过的JS面试题)
原文地址:http://topic.csdn.net/u/20100701/14/ed652911-7128-48f6-b8e0-1f2d1b3abd47.html
向作者致敬!
W3C对标准的推进,Firefox,Chrome,Safari,Opera的出现,结束了IE雄霸天下的日子。
然而,这对开发者来说,是好事,也是坏事。
说它是好事,是因为浏览器厂商为了取得更多的市场份额,会促使各浏览器更符合W3C标准,而得到更好的兼容性,并且,不同浏览器的扩展功能(例如 -moz,-webkit开头的样式),对W3C标准也是个推进;说它是坏事,因为,多个浏览器同时存在,这些浏览器在处理一个相同的页面时,表现有时会有差异。这种差异可能很小,甚至不会被注意到;也可能很大,甚至造成在某个浏览器下无法正常浏览。我们把引起这些差异的问题统称为“浏览器兼容性问题”。而正是这些“浏览器兼容性问题”,无形中给我们的开发增加了不少难度。
从浏览器内核的角度 来看,浏览器兼容性问题可分为以下三类:
1. 渲染相关:和样式相关的问题,即体现在布局效果上的问题。
2. 脚本相关:和脚本相关的问题,包括JavaScript和DOM、BOM方面的问题。对于某些浏览器的功能方面的特性,也属于这一类。
3. 其他类别:除以上两类问题外的功能性问题,一般是浏览器自身提供的功能,在内核层之上的。
例如下面的页面,是一个渲染相关的问题:
在各个浏览器中都表现的不同,这就属于兼容性问题。
造成浏览器兼容性问题的根本原因就是浏览器各浏览器使用了不同的内核,并且它们处理同一件事情的时候思路不同。
现今常见的浏览器及其排版引擎(又称渲染引擎)及脚本引擎,如下:
而造成浏览器兼容性问题的常见原因则是设计师写出了不规范的代码,不规范的代码会使不兼容现象更加突出。
例如:
不规则的嵌套:
div> <li>新闻标题一</li> <li>新闻标题一</li> <li>新闻标题一</li> </div>
DIV 中直接嵌套 LI 元素是不合标准的,LI 应该处于 UL 内。此类问题常见的还有 P 中嵌套 DIV, TABLE等元素。
不规范的DOM接口和属性设置:
document.all.a_name.style.top=35;
上面代码中top的值,其实应该是一个字符串值,需有单位。例如:35px。
总之,人为的原因也占很大一部分。而人为造成兼容性问题的原因,除了粗心之外,大都源于浏览器bug的存在,和开发者对标准的不了解。
比如,如果要做一个功能,功能是想让鼠标悬停在 IMG 元素上方时,可以出现提示信息,经常针对 IE 做开发的人,可能会使用 IMG 元素的 “alt” 属性,但其他浏览器中就是不给 ‘alt’ 属性面子。因为 W3C 标准中规定要去做这件事的属性是 ”title“,大多浏览器符合标准,IE 不符合,这是 IE 浏览器内核的问题;开发者不知道 ”title“ 才是正解,不遵循标准去写代码,是开发者的问题。所以,一个问题分两半,浏览器和开发者都有责任。
既然都有责任,就都有义务去解决兼容性问题。那么,从浏览器的角度来讲,它的厂商应该修复浏览器的bug和不合标准的地方,当某一天 IE 的 ”alt“ 不能用于提示了,还有人用这个错误的属性去显示提示么? 从开发者角度来讲,多了解标准,了解浏览器兼容性问题,就可以在开发的过程中,有效的避开兼容性问题,让你的页面在所有浏览器中畅通无阻。
废话少说,下面就讲讲如何有效的避免一些兼容性问题。
概括来说,避免兼容性问题的有效途径就是:正确的使用 DTD,书写符合 W3C 规范的代码。
那什么叫做 DTD 呢,DTD是做什么的和为什么要写DTD呢?DTD 是 Document Type Definition 的缩写,是文档类型定义。定义上说“此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范”。
那其中所说的规范又是什么呢?我们平时所说的规范大部分情况下就指的是 W3C 制定的规范,做WEB前端开发的时候主要接触其中的HTML、CSS、DOM、XML部分。顺便说一下,W3C的网站现在已经提供可校验HTML和CSS 代码的工具了,不知道的同学可以看一下:http://validator.w3.org/ 这个是校验HTML和XHTML的,http://jigsaw.w3.org/css-validator/ 这是校验CSS样式表的。
DTD 和 W3C校验 及 浏览器解析 之间有啥关系?简单地说:W3C校验将检查DTD与文档内容是否匹配;浏览器将根据DTD决定启用何种渲染模式。
后面半句就是说,写了正确的DTD,浏览器就会按照标准方式(Standards mode)渲染和解析你的页面,那如果不写或者写错呢,那浏览器就会使用怪癖模式(Quirks mode)来渲染和解析你的页面。怪癖模式的产生的主要原因大概是为了向后兼容,就是为了使那些很早之前(IE 6之前的时代)的网页看上去跟原来的样子差不多。
下面有一个直观的例子。
其中,牌子是DTD,水果什么的是文档真实内容,对号和差是W3C代码检测,动植物是浏览器模式。
这是我们写的代码:
W3C校验将检查DTD与文档内容是否匹配,发现有的对不上号,会给出提示:
浏览器运行的时候,浏览器将根据DTD决定启用何种渲染模式,不会管你写的正确与否,按照你写的方式渲染:
如何判断一个DTD是写得对不对?或者想知道现在的DTD在各个浏览器下到底会触发哪种渲染模式?来这里http://hsivonen.iki.fi/doctype/ 核对一下就行。网页的靠下部分有个红红绿绿的表,自己对照一下好了。
另外补充两点个人经验:
1. 正确的使用DTD,并书写符合W3C规范的代码,虽然现在你即使做到这两点也不能保证所有浏览器都会表现一直,但可以最大程度上避免很多兼容性问题。
2. 推荐使用 HTML5 的 DTD,好写好记:<!DOCTYPE html>,可以触发各浏览器的 Standards Mode。
但是,问题又来了,这样做一定就能解决问题了吗? 不一定,但是这样可以避免很多问题。比如,IE的盒模型bug等,都可以通过此手段避免。另外有一些是浏览器的bug,无法解决的。比如,在Firefox中,TABLE 里的绝对定位元素的定位问题,再比如IE早期版本对 ‘!important’ 的支持缺陷等。
这时候,就要采取一些非凡的手段了。
一种是在JS里用浏览器判断,针对不同的浏览器做不同的处理;另一种,CSS hack。
在使用CSS hack 的时候注意,CSS hack一定要是丑陋的,时刻提醒自己,那是不得已而为之的解决方式。
总而言之,正确的使用DTD、并书写符合W3C规范的代码 + 使用其他手段……,这些都不能完全避免浏览器的不兼容问题。
浏览器兼容性问题的“解决”需要浏览器开发商、W3C、开发者共同的努力才能实现。
而作为开发者,我们要做的,就是尽量了解标准,熟悉各浏览器的Bug和特性,灵活设计页面功能,才可以避免出现浏览器兼容性问题。
发表评论
-
小心 IE 中对 IMG 元素 alt 属性的误用(转载)
2011-09-30 11:58 0原文地址:http://topic.csdn.net/u/20 ... -
小心IE 下document.getElementById()的陷阱(转载)
2011-09-30 11:56 0原文地址:http://topic.csdn.net/u/20 ... -
小心,IE中width/height的设定值可能被其内容撑大(转载)
2011-09-30 11:55 0原文地址:http://topic.csdn.net/u/20 ... -
Firefox中table元素的绝对定位子元素包含块判定错误的bug(转载)
2011-09-30 11:52 0原文地址:http://topic.csdn.net/u/20 ... -
如何正确的获取scrollTop/scrollLeft的值(转载)
2011-09-30 11:49 0原文地址:http://topic.csd ... -
CSS Hack的基本原理、常用CSS hack及使用原则(转载)
2011-09-30 11:47 0原文地址:http://topic.csdn.net/u/20 ... -
你知道吗?——表格的盒子模型问题(转载)
2011-09-30 11:45 0原文地址:http://topic.csd ... -
重新认识IE盒模型bug(转载)
2011-09-30 11:43 0原文地址:http://topic.csdn.net/u/20 ... -
警惕你的 Date 对象(转载)
2011-09-30 11:41 0原文地址:http://topic.csdn.net/u/20 ... -
深入挖掘document.getElementsByTagName()方法的返回值(转载)
2011-09-30 11:37 0原文地址:http://topic.csdn.net/u/20 ... -
IE6 中 A 标签 hover 伪类特殊性过高的问题(转载)
2011-09-30 11:34 1166原文地址:http://topic.csdn.net/u/20 ... -
<a>标签的伪类书写顺序问题(转载)
2011-09-30 11:32 968原文地址:http://topic.csdn.net/u/20 ... -
你的元素居中对齐了吗?——关于 'text-align:center' 的问题(转载)
2011-09-30 11:29 911原文地址:http://topic.csd ... -
浏览器兼容性问题相关的所有目录(转载)
2011-09-30 11:07 963最近在寻找浏览器兼容性方面的总结帖,发现这么一个CSDN牛人( ...
相关推荐
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的...
javascript解决浏览器兼容性问题
各种浏览器的兼容性和CSS HACK的写法,让你不再为IE6和各种浏览器的兼容性发愁,非常方便!
Web前端开发,PC端,移动H5端,常见浏览器兼容性问题汇总,浏览器兼容性问题汇总-web前端-html-css
常见浏览器兼容性问题与解决方案 常见浏览器兼容性问题与解决方案 常见浏览器兼容性问题与解决方案
资源名称:浏览器兼容性问题简介内容简介:浏览器兼容性问题分类浏览器的“模式”如何编写具有良好兼容性的网页显示问题:CSS兼容性height/width, position:fixed, …脚本问题:Java script 兼容性DOM, Date....
解决浏览器兼容性问题的主要方法是CSS hack。由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面...
兼容性测试方案-浏览器编 兼容性测试方案-浏览器编
vue-print-nb 兼容低版本浏览器 import Print from '@/lib/vue-print-nb/print.umd.min'Vue.use(Print)
浏览器兼容性问题及解决方案
1. HTML对象获取问题 3 2. const问题 3 3. event.x与event.y问题 3 4. window.location.href问题 3 ...25. 属性选择器(这个不能算是兼容,是隐藏css的一个bug) 3 26. 为什么FF下文本无法撑开容器的高度 3
web前端浏览器兼容性问题,以及其他新知识点:例如SEO javascript mate等问题
《浏览器兼容性问题简介》——黄昊 点击tag“WebRebuild北京第一届交流会”下载全部6个PPT 北京Google技术用户组与W3C、Webrebuild联合在Google公司成功地举办了第一次Webrebuild北京交流会。
浏览器兼容性设置浏览器兼容性设置浏览器兼容性设置浏览器兼容性设置浏览器兼容
里面讲述了浏览器兼容性问题的一些内容汇总
web前端开发,浏览器兼容性总结!
自我总结常见浏览器的兼容性问题并作出相应解释和处理方法,涵盖较全面
提出一种结合DOM(Document Object Model)结构分析和页面元素(Screen Element)的计算机视觉分析方法,实现Web应用的跨浏览器兼容性测试XBCT(Cross-Browser Compatibility Testing),和现有的测试方法比较,实验...
浏览器兼容问题.ppt