`
ioio
  • 浏览: 137507 次
  • 性别: 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
评论
发表评论

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

相关推荐

    浏览器对于含小数值px(像素)解析的差异及小数值如何解决兼容性问题

    说到解决兼容性问题，不得不提一下css hack，曾几何时我以会使用几个hack沾沾自喜，后来发现自己真是个vip级别的蠢蛋,浏接下来介绍览器对于含小数值px（像素）解析的差异

    protolock：协议缓冲区配套工具。 跟踪您的.proto文件并防止对消息和服务的更改影响API兼容性

    为什么您在忙于解决问题时是否偶然破坏了您的API兼容性？ 您可能忘记了保留消息的字段号，或者在删除属性后重新排序了字段。 也许一个新的团队成员不熟悉协议缓冲区的向后兼容性，并且犯了一个简单的错误。 ...

    2013猎豹极速浏览器

    其具有首创的智能切换引擎，动态选择内核匹配不同网页，并且支持HTML5新国际网页标准，极速浏览的同时也保证兼容性。2012年10月16日，猎豹浏览器推出2.0版（beta），内核升级至Chrome21，成为内核最新的双核浏览器，...

    Atmospheric Height Fog 1.8.1.unitypackage

    由于多个深度渲染问题，雾将无法在URP 7.2.0或更高版本Android设备上使用（Unity的漏洞）！为使本工具正常运行，需要开启深度纹理和以下URP...兼容性 ●标准渲染管线 ●通用渲染管线 7.1.8+ ● Amplify Shader Editor

    现行各种WEB数据库设计技术的分析与比较

    针对目前Web数据库应用挂术辫繁众多的...通过相互问性能优劣的比较，包括对于测览器兼容性的比较，进一步探索Web数据库应用挂术的发展趋势．艚出 DHTML这一开放的跨平台的语言，将套戚为新一代动态Web主万开发的标准

    CSS水平对齐示例介绍

    在CSS中可以使用多种属性来水平对齐元素，不过同时也要考虑一下览器兼容性问题，感兴趣的朋友可以参考下

    projection-launcher-windows：Windows的投影仪启动器

    如果您发现错误或存在兼容性问题，请在此存储库的“问题”部分下打开故障单。 执照 版权所有（c）2020 JrMasterModelBuilder 根据Mozilla Public License v。2.0许可。 如果该许可不适用于您，请随时与我联系。

    GENERATEUR-PANORAMA:[A-Frame] Panorama Generator网站（360°虚拟导览）

    发电机全景[A-Frame] Panorama生成器网站（360°虚拟导览）（2021）演讲和背景我们的项目旨在创建一个网站，使您可以轻松生成自己的虚拟导览。 该项目是“ IUT虚拟之旅”项目的第二部分。 （在此git上可用） 此应用...

    packer-plugin-sdk：Packer Plugin SDK使构建Packer插件（构建器，预配器或后处理器）能够管理任何服务提供商或自定义内部解决方案

    Packer之前的版本仍与第三方插件兼容，但是插件应使用Packer早期版本内部的插件工具以确保完全的API兼容性。 兼容 Packer Plugin SDK内置于Go中，并将Go的用作其支持策略。 SDK支持Go的两个最新主要版本。 当前，...

    PDF-XChange Viewer v2.5.322.9.zip

    软件功能强大，有丰富的标注功能、测量工具，多页签显示、强大的导出图像功能、批量搜索、放大与导航功能，支持中文注释，并有强大的兼容性和文字视觉效果。软件不但运行稳定，开启pdf文件的速度也相当快，在阅读...

    绩效管理系统设计方案.doc

    设置集中数据库服务器，数据库系统采用Oracle 10g或DB2，以及J2EE应用服务器组（WebLogic 9 Server或WebSphere Server），所有的系统客户端（员工、部门经理、财务或人力资源部门）直接使用IE浏 览器或其他的通用...

    WinCryptSSHAgent：在Windows上无缝使用Yubikey进行SSH身份验证

    WinCrypt SSH代理 介绍 基于Windows CryptoAPI的SSH代理。 该项目允许其他程序访问Windows证书存储区中... 兼容性好 兼容性 Windows中有许多不同的OpenSSH代理实现。 该项目在Windows中实现了4种流行的协议： Cygwi

    dext：:magnifying_glass_tilted_left:智能启动器。 由JavaScript提供支持

    从 ，除非考虑到向后兼容性，否则我们不会添加任何功能。 当前， 的路线图将朝着实现以下目标的方向发展：将所有糊精包合并为一个monorepo 。总览Dext是JavaScript驱动的智能启动器。 在Alfred的影响下使用...

    mailjet-apiv3-nodejs：[API v3]官方Mailjet API v3 NodeJS包装器

    目录兼容性该库正式支持以下Node.js版本： v4.1 v4.0 v5.0.0 v6.11.1安装首先，创建一个项目文件夹： mkdir mailjet-project && cd $_ 然后使用以下代码安装包装器： npm install node-mailjet 如果要进行全局安装，...

    Starbound-Mass-Effect-Edition:星际大战中的质量效应

    文件夹：补丁包含兼容性补丁程序，以使SMEE与之兼容。文件夹：可选包含可选的mod包。 此处的每个文件夹代表一个mod补丁。文件夹：SMEE 核心Starbound-Mass-Effect-Edition mod文件夹。文件夹：SMEEmusic 适用于...

    PixelCraft：像素艺术编辑器

    它是具有脱机兼容性的渐进式Web应用程序（PWA）。 它对移动设备友好，并且非常易于使用。 总览 在以下两个位置均可使用此应用程序： 打开后，您将看到如下屏幕 您可以为“画布”选择“任意尺寸”，默认尺寸为16 ...

    aws-ebs-csi-driver：Amazon EBS的CSI驱动程序https：aws.amazon.comebs

    CSI规格兼容性表 AWS EBS CSI驱动程序\ CSI版本 v0.3.0 v1.0.0 v1.1.0 主分支 没有 没有 是 v0.8.x 没有 没有 是 v0.7.1 没有 没有 是 v0.6.0 没有 没有 是 v0.5.0 没有 没有 是 v0.4.0 没有 没有 是 v0.3.0...

    play-button-itunes-patch：“播放”按钮iTunes补丁

    播放按钮iTunes补丁 最新的macOS支持和生命周期终止 请注意，此补丁程序不适用于macOS High Sierra和更高...OS X El Capitan兼容性 该补丁通过修改系统文件（rcd）起作用。 使用El Capitan中引入的新的系统完整性保护

    verchew：系统依赖性版本检查器

    它唯一的外部依赖性是任何Python解释器，该解释器应已安装在macOS和大多数基于Linux的操作系统上。建立要求Python 2.7+或Python 3.3+安装使用 （或pip）全局安装verchew ： $ pipx install verchew或将其添加到您的...

    index:通过示例进入模块是一系列工作指南

    Go 1.10中具有语义导入路径的向后兼容性示例 尚未转换为模块的包/项目的另一个示例 分叉尚未转换为Go模块的项目 ... Wiki： 常问问题 去做 反馈 贡献 请参阅贡献。 注意事项 该项目正在进行中。 反馈/ PR欢迎。 ...

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