`
ioio
  • 浏览: 140968 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

览器兼容性的那点问题

浏览器IECSSXHTMLChrome 
阅读更多

一.主流浏览器内核

Trident：IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到目前的IE7。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器涌现（如 Maxthon、TheWorld 、TT、GreenBrowser、AvantBrowser等）。

 

Geckos： Netcape6开始采用的内核，后来的Mozilla FireFox也采用了该内核，Geckos的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。

 

Webkit：Safari浏览器使用的内核。Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL(General Public License )条约下授权。Webkit也是自由软件，同时开放源代码。在安全方面不受IE、Firefox的制约，所以Safari浏览器还是比较安全的浏览器。

 

二．Web标准

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面。

　　1．结构标准语言

　　（1）XML

　　XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0。

　　（2）XHTML

　　XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。

　　2. 表现标准语言

　　CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考http://www.w3.org/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。

　　3.行为标准

　　（1）DOM

　　DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范，DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。

 

 

三.浏览器的下载和渲染顺序

 

IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的(多线程)。在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（但并不是说所有相关联的元素都已经下载完。）在下载过程中，如果遇到某一标签是嵌入文件，并且文件是具有语义解释性的（例如：JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。并且在下载后进行解析，解析（JS、CSS中如有重定义，后定义函数将覆盖前定义函数）过程中，停止页面所有往下元素的下载。样式表文件比较特殊，在其下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行样式渲染。并以此方式一直渲染下去，直到整个页面渲染完成。

 

 

 四，浏览器的渲染模式

由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)，这就是二者最简单的区别。 W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。

浏览器选择工作模式的方式：

1. 浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对没有doctype声明的网页采用quirks mode解析。 
2. 对于拥有doctype声明的网页，什么浏览器采用何种模式解析，根据声明的类型进行解析。

3. 对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：对于那些浏览器不能识别的doctype声明，浏览器采用strict mode解析
4. 在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。
5.在现有有doctype声明的网页，绝大多数是应该采用strict mode进行解析的。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Transitional类型：是指一种过渡类型，使用这种类型浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML的语法。这种是现在通用的方法，用DW创建网页时默认就是这种类型。
Strict类型：严格类型，使用时浏览器将相对严格，不允许使用任何表现形式的标识和属性，如在元素中直接使用bgcolor背景色属性等。
Frameset类型：框架页类型。框架页面就要用这种类型了。

有个问题，就是对于IE，如果DOCTYPE前存在注释，会进入Quirks模式。

问题一.

<Script Language="JavaScript" type="text/jscript">

五．各浏览器对页面外部资源加载的策略

IE6 只会有2个并发下载资源，各资源按照在HTML中出现的顺序进行加载，javascript文件会阻塞其后所有资源的加载。

IE8,ff3.6都可以起6个线程去下载资源，javascript文件已经不会阻塞其他资源的加载，甚至多个javascript文件可以一起加载，并且会保证执行的顺序。而且会分析HTML结构，优先下载script和link标签定义的外部资源

Chrome测时用的是8版本的，最多可以起6个线程并发下载，head部分的资源会单独下载，且阻塞body中的其他资源的加载，会优先加载script和link标签定义的资源。

 

 

function save_module_conf()

{

       alert(111);

}

 

</Script>

问题二.

这个url:

http://www.baidu.com/s?wd=我来测试

 

Ie 会变成啥？

Chrome会变成啥?

Ff会变成啥 ？

 

 

六．各浏览器兼容性注意事项:

<!--[if !supportLists]-->1.    <!--[endif]-->减少使用document.getElmentByName(“id”)，或者document.getElmentByName(“name”)  ,ie下可以正常，但FF，Chrome不兼容，修改为 document.getElementById(“”)。

<!--[if !supportLists]-->2.    <!--[endif]-->在IE中,event对象有x,y 属性，可以获得event对象的clientX,clientY与offsetX,offsetY，在FF下没有event。

<!--[if !supportLists]-->3.    <!--[endif]-->ff 下的body在body标签没有被浏览器完全读入之前就存在，而IE必须在body完全读入之后才存在。

<!--[if !supportLists]-->4.    <!--[endif]-->Chrome,ff不支持document.all属性。比如：document.all.txt_name.value

<!--[if !supportLists]-->5.    <!--[endif]-->OVERFLOW- Y:auto;OVERFLOW-X:hidden在ie里面可以用no表示隐藏，但在ff里面必须用hidden。

<!--[if !supportLists]-->6.    <!--[endif]-->ff下获取鼠标按键事件跟IE不同 ,ff下 e.witch,ie下用event.keycode

<!--[if !supportLists]-->7.    <!--[endif]-->document.getElementById("inputname")) 在IE中都可以正确返回DOM，在其他浏览器则返回null;

<!--[if !supportLists]-->8.    <!--[endif]-->所有的标记都必须要有一个相应的结束标记 ,在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。在XHTML中这是不合法的。

<!--[if !supportLists]-->9.    <!--[endif]-->所有标签的元素和属性的名字都必须使用小写 ,大小写夹杂也是不被认可的

<!--[if !supportLists]-->10.<!--[endif]-->所有的XML标记,HTML标签都必须合理嵌套

前我们这样写的代码：

　　<p><b></p>/b>

　　必须修改为：

　　<p><b></b></p>

<!--[if !supportLists]-->11.<!--[endif]-->所有的属性必须用引号""括起来在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如:<height=80> 必须修改为：<height="80"> 特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用

<!--[if !supportLists]-->12.<!--[endif]-->把所有<和&特殊符号用编码表示 ：任何小于号（<），不是标签的一部分，都必须被编码为& l t ;任何大于号（>），不是标签的一部分，都必须被编码为& g t ;任何与号（&），不是实体的一部分的，都必须被编码为& a m p

<!--[if !supportLists]-->13.<!--[endif]-->XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：

　　<td nowrap> <input type="checkbox" name="shirt" value="medium"

　　checked>

　　必须修改为：

　　<td nowrap="nowrap"> <input type="checkbox" name="shirt"

　　value="medium" checked="checked"

14 .不要在注释内容中使“--” :

　　“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。最好不要这样写：

<!--这里是注释-----------这里是注释-->

<!--[if !supportLists]-->15. <!--[endif]-->慎用 target="_blank",XHTML1.0中不推荐使用

<!--[if !supportLists]-->16. <!--[endif]-->各浏览器默认的内外边距不同

｛margin:0 padding:0｝

<!--[if !supportLists]-->17. <!--[endif]-->Ie chrome中table td的高度包括td的宽度，而ff不包括。

<!--[if !supportLists]-->18. <!--[endif]-->cursor:hand ie和 chrome中管用，ff中失效。用pointer

<!--[if !supportLists]-->19. <!--[endif]-->&nbsp; ie中的宽度会比 chrome,ff中的窄一点。

<!--[if !supportLists]-->20. <!--[endif]-->不能用cols来控制textara的宽度，FF下与其他浏览器不同，设置width

<!--[if !supportLists]-->21. <!--[endif]-->发布平台菊花(一点刷新按钮，那行宽度就发生变化)，margin:  padding: 全部清0，    versincal-align middle

<!--[if !supportLists]-->22. <!--[endif]-->word-wrap:break-word;word-break:break-all;

break-word，强制换行

break-all，是断开单词。在单词到边界时，下个字母自动到下一行

这段在ie,chrome下正常，FF不支持

可以将内容放在div里面，然后给div设置固定宽度,在使用上边属性。

 

Js兼容性

<!--[if !supportLists]-->1．<!--[endif]--> document.form.item问题
代码中存在许多 document.formName.item("itemName")这样的语句：document.test_form.txt_1.value不能在FF chrome下运行，可以使用 document.test_form.elements["txt_1"].Value

<!--[if !supportLists]-->2．<!--[endif]-->现有代码中许多集合类对象取用时使用 ()，IE能可以，FF不能。改用 []作为下标运算。如：document.forms("formName")改为 document.forms["formName"]。
又如：

document.getElementsByName("inputName")(1)

改为 document.getElementsByName("inputName")[1]

<!--[if !supportLists]-->3．<!--[endif]-->HTML对象的 id作为对象名的问题
在 IE中，HTML对象的 ID可以作为 document的下属对象变量名直接使用,及时在使用name的地方可以换成id名称，但是在 FF,chrome中不能。
    用 getElementById("idName")代替 idName作为对象变量使用。

<!--[if !supportLists]-->4．<!--[endif]-->用idName字符串取得对象的问题
   在IE中，利用 eval(idName)可以取得 id为 idName的 HTML对象，在FF中不能。getElementById(idName)代替 eval(idName)。

var v_v_="document.getElementById('div_test_1')";

    var v_div_=eval(v_v_);   alert(v_div_);

alert(v_div_.innerHTML);

<!--[if !supportLists]-->5．<!--[endif]-->变量名与某 HTML对象 id相同的问题
    在 FF中，因为对象 id不作为 HTML对象的名称，所以可以使用与 HTML对象 id相同的变量名，IE中不能。在声明变量时，一律加上 var，以避免歧义，这样在 IE中亦可正常运行。最好不要取与 HTML对象 id相同的变量名，以减少错误。

<!--[if !supportLists]-->6．<!--[endif]-->frame在 IE中 可以用window.testFrame取得该frame，FF中不行

<!--[if !supportLists]-->7．<!--[endif]-->在frame的使用方面FF和ie的最主要的区别是：如果在frame标签中书写了以下属性：<frame src="xx.htm" id="frameId" name="frameName" />那么ie可以通过id或者name访问这个frame对应的window对象,而FF,chorme只可以通过name来访问这个frame对应的window对象

比如在ie下：

window.top.frameId或者window.top.frameName来访问这个window对象
    FF和chrome下： 只能这样window.top.frameName来访问这个window对象另外，在FF和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src = ''xx.htm''来切换frame的内容
也都可以通过window.top.frameName.location = ''xx.htm''来切换frame的内容

<!--[if !supportLists]-->8．<!--[endif]-->html中节点缺失时，IE和FF对parentNode的解释不同，例如
<form>
<table>
<input/>
</table>
</form>
FF中input.parentNode的值为form,而IE中input.parentNode的值为空节点

<!--[if !supportLists]-->9．<!--[endif]-->FF，chrome中节点没有removeNode方法，必须使用如下方法       node.parentNode.removeChild(node)

<!--[if !supportLists]-->10．<!--[endif]-->url encoding
    在js中如果书写url就直接写&不要写&amp;例如

var url = ''xx.jsp?objectName=xx&amp;objectEvent=xxx'';
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器一般会服务器报错参数没有找到
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

<!--[if !supportLists]-->11．<!--[endif]-->IE下 input.type属性为只读，但是chrome,FF下可以修改

 用setAttribute设置事件现有问题：

var obj = document.getElementById('objId');obj.setAttribute('onclick','funcitonname();'); FIREFOX支持，IE不支持

<!--[if !supportLists]-->12. <!--[endif]-->IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数如下： var obj = document.getElementById('objId');obj.onclick=function(){fucntionname();};这种方法所有浏览器都支持

<!--[if !supportLists]-->13. <!--[endif]-->var backendArray = test_backends.split("\n");

<!--[if !supportLists]-->14. <!--[endif]-->Id 不能有重复的，否则组件的值是取不到的。

 

 

在实际工作中：

 

1.我们不是为了通过校验才标准化。web标准的本意是实现内容(结构)和表现分离，就是将样式剥离出来放在单独的css文件中。这样做的好处是可以分别处理内容和表现，也方便搜索和内容的再利用。

2.平时遵守一些规范，就可能大大较少一些错误。

3.开发过程中有意识去优化网页加载速度:js ,html压缩，cache,

4. 把CSS放在文档的头部，仅需要在关闭<boby>前插入js.在这些脚本在后台加载的同时，用户先得到看似完整的页面。

5.将JS和CSS文件放在外部文件中，浏览器缓存他们要比每次调用加载速度更快些。 

分享到：
| mysql binlog
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    STM32兼容性和移植说明

    2. 兼容性问题：在移植过程中，会面临外设功能和性能的兼容性问题。不同系列微控制器的外设可能会有细微的差异，如不同的GPIO引脚可用性、定时器配置、ADC/DAC精度以及中断优先级等。 3. 软件层面的移植：软件层面...

    浏览器兼容代码

    为了确保网页能够在各种浏览器中正常显示，开发者需要采用一些特定的技术来解决浏览器之间的兼容性问题。本文将详细解析几种常用的浏览器兼容代码及其工作原理。 #### 二、案例分析 ##### 案例一：处理各浏览器...

    STM32F2系列技术培训 STM32F1与STM32F2 之间的兼容性

    STM32F1和STM32F2作为STMicroelectronics公司的ARM Cortex-M3微控制器家族中的成员，两者在设计上保持了高度的兼容性，尤其是在功能引脚的pin-to-pin兼容方面。这意味着开发人员可以在很大程度上复用原有的硬件设计...

    基于二维码的展馆便携式游客导览系统

    - **移动终端兼容性**：确保不同类型的移动终端能够顺利读取二维码。 ##### 2. 游客定位诱导系统 **功能**：根据二维码读取到的位置ID，系统自动查询数据库，获取当前位置及其周边信息，并为游客提供路线引导。 *...

    景点导览 软件工程概论

    6. **兼容性需求:** 支持多种设备和操作系统。 **经济可行性：** 1. **投资规划：** - 基础设施（办公室、硬件设备等）。 - 软件开发及维护成本。 - 人员培训、团队建设等。 2. **收益分析：** - 定量收益：...

    景区智能导览系统方案.doc

    - **网络环境**：建议采用高速稳定的无线网络覆盖整个景区，确保信息传输的实时性和准确性。 该景区智能导览系统方案以提升游客体验为核心，结合现代信息技术，旨在打造一个智能化、信息化的旅游目的地，实现旅游...

    基于android手持设备的景区导览系统需求分析.docx

    - 开发工具：使用Java语言进行开发，具有良好的跨平台兼容性。 - **服务端开发环境：** - 框架：Microsoft Foundation Classes (MFC)。 - 服务器：Windows操作系统。 - 数据库：MSSQL Server 2005及以上版本。 ...

    基于android手持设备的景区导览系统设计.docx

    ### 基于Android手持设备的景区导览系统设计知识点 #### 一、项目背景与目标 - **项目背景**：随着旅游业的发展，游客对于旅游体验的要求越来越高，特别是在信息获取和服务便捷性方面。传统的导览方式如纸质地图、...

    基于android手机导览系统概要设计说明书.doc

    项目可能面临的风险包括技术难度、数据安全、用户界面设计、硬件兼容性等问题。为降低这些风险，需在设计阶段充分考虑各种因素，如采用成熟的技术框架，强化数据加密机制，优化UI以提高用户体验，以及进行广泛的设备...

    基于android手持设备的景区导览系统

    ### 基于Android手持设备的景区导览系统知识点解析 #### 一、项目背景与需求分析 **项目背景：** 随着经济的发展和社会的进步，人们的休闲娱乐方式日益多样化，旅游成为越来越多人的选择。在此背景下，如何提升...

    疗一疗本土“瘤”览器.pdf

    百度浏览器在处理某些URL时会切换到IE兼容模式，这可能使得浏览器暴露于那些在现代浏览器中已修复的安全问题，因为IE浏览器的某些版本可能存在更多的漏洞。 8. **安全审计工具**： 文档中提到了 `Xss Auditor` ...

    基于iBeacon技术与智能手机的溶洞室内智能导览系统设计.pdf

    RFID则存在范围小、兼容性问题，且需游客额外携带设备；GPS在室内信号弱，而二维码需要手动扫描，降低了游客体验。 该智能导览系统由三部分构成：系统服务器、游客的智能手机以及溶洞内的iBeacon位置标签设备。...

    毕业设计西安兵马俑(含语音画册与实时导览)微信小程序源码

    10. **测试与发布**：完成开发后，需要进行功能测试、性能测试，确保小程序在不同设备上的兼容性，然后按照微信的规定提交审核并发布。 整体来看，这个项目涵盖了移动应用开发的多个重要环节，对于提升开发者的技术...

    基于安卓设备的景区导览系统.doc

    5. **硬件兼容性**：服务器需支持Intel和AMD平台，配备高性能CPU、内存和硬盘，运行Windows XP或更高版本。客户端设备需运行Android 2.1及以上版本，具备WiFi、GPS和触摸屏功能，支持音频输出。 6. **可靠性与性能*...

    基于SpringBooot+vue.js的智慧景区导览系统的设计与实现【 毕业设计】

    【作品名称】：基于SpringBooot+vue.js的智慧景区导览系统的设计与实现【 ...1.并不一定要求为此版本，本项目主要前端主要是使用vue2，相关兼容性，看npm兼容性行之 8.读者须按照SQL文件建库（位于项目根目录的 sql文

    基于android手持设备的景区导览系统需求分析.pdf

    8. 扩展性与兼容性 系统设计应考虑未来扩展，允许添加新的功能和服务。同时，要兼容多种Android设备，确保不同型号的手机和平板都能正常运行。 9. 可维护性 为了保证系统的长期运行，必须考虑到易于维护和升级，...

    QC浏览器通用

    "QC浏览器通用"是一个专门为解决与QC相关的浏览器兼容性问题而设计的软件。这款工具允许用户在不考虑Internet Explorer(IE)浏览器版本的情况下，也能流畅地进行缺陷管理，提高工作效率。 首先，我们来深入了解一下...

    搜狗浏览器收藏夹导出文件转换为IE格式

    在IT领域，数据格式的兼容性问题很常见，尤其是在跨平台或者不同软件之间。这个案例展示了如何利用第三方工具解决这种问题。同时，这也提醒我们在选择和使用不同软件时，需要考虑到数据迁移和格式兼容性，以免造成...

    基于android手持设备的景区导览系统需求分析说明书.docx

    项目可能面临的技术风险包括Android平台的兼容性问题、网络连接的稳定性、用户界面设计的吸引力以及系统性能优化等。需要在开发过程中进行持续的风险评估和管理。 1.3 文档约定 本说明书遵循标准的软件需求规范，...

Magicbox
Global site tag (gtag.js) - Google Analytics