下载文档原格式
浏览器兼容性问题⼤汇总JavaScript1.HTML对象获取问题FireFox：document.getElementById(“idName”);ie:document.idname或者document.getElementById(“idName”).解决办法：统⼀使⽤document.getElementById(“idName”);2.const问题说明:Firefox下,可以使⽤const关键字或var关键字来定义常量;IE下,只能使⽤var关键字来定义常量.解决⽅法：统⼀使⽤var关键字来定义常量.3.event.x与event.y问题说明:IE下,event对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.解决⽅法：使⽤mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.4.window.location.href问题说明:IE或者Firefox2.0.x下,可以使⽤window.location或window.location.href;Firefox1.5.x下,只能使⽤window.location.解决⽅法：使⽤window.location来代替window.location.href.5.frame问题以下⾯的frame为例：<frame src=”xxx.html” id=”frameId” name=”frameName” />(1)访问frame对象：IE:使⽤window.frameId或者window.frameName来访问这个frame对象.frameId和frameName可以同名。
Firefox:只能使⽤window.frameName来访问这个frame对象.另外，在IE和Firefox中都可以使⽤window.document.getElementById(“frameId”)来访问这个frame对象.(2)切换frame内容:在 IE和Firefox中都可以使⽤window.document.getElementById(“testFrame”).src = “xxx.html”或window.frameName.location = “xxx.html”来切换frame的内容.如果需要将frame中的参数传回⽗窗⼝(注意不是opener,⽽是parent frame)，可以在frame中使⽤parent来访问⽗窗⼝。
JavaScript中的浏览器兼容性问题与解决方案在开发网页时，经常会遇到JavaScript的浏览器兼容性问题。
由于不同的浏览器对JavaScript的解释和支持程度不同，开发者需要注意这些差异，以确保网页在不同浏览器上正常运行。
本文将介绍一些常见的浏览器兼容性问题，并提供相应的解决方案。
一、DOM操作差异DOM（Document Object Model）是JavaScript操作网页内容的重要接口。
然而，不同浏览器对DOM的实现方式会存在差异，导致相同的DOM操作在不同浏览器上产生不同的效果或错误。
解决方案：1. 使用适配器模式：使用工具函数或库来封装DOM操作，例如jQuery等。
这些封装库会处理浏览器兼容性问题，使得开发者无需关心具体的差异。
2. 检测浏览器特性：通过判断浏览器特性的支持情况，选择合适的方式进行DOM操作。
可以使用Modernizr等工具来进行特性检测。
二、事件处理差异不同浏览器对事件的处理方式也存在差异。
例如，事件对象的属性、方法以及事件触发顺序等方面都可能有所不同。
解决方案：1. 使用事件库：类似于适配器模式，可以使用事件库来处理不同浏览器之间的差异。
例如，使用jQuery的事件处理方法可以保证跨浏览器的一致性。
2. 绑定事件时添加前缀：在绑定事件时，可以先针对具体的浏览器添加前缀，以修复特定浏览器的兼容性问题。
例如，`attachEvent`和`addEventListener`可以同时使用来绑定事件。
三、CSS样式差异JavaScript常用于修改网页的样式，但不同浏览器对CSS属性的解释也会有所不同，导致样式显示不一致。
解决方案：1. 使用样式库：像Bootstrap、Normalize.css等库提供了跨浏览器的CSS样式订正，可以减少不同浏览器之间的样式差异。
2. 检测浏览器前缀：对于支持特定前缀的属性，可以通过检测浏览器类型来动态添加相应的前缀。
例如，使用类似`-webkit-`和`-moz-`的前缀。
前端常见浏览器兼容性问题解决⽅案市场上浏览器种类很多，不同浏览器的内核也不尽相同，所以各个浏览器对⽹页的解析存在⼀定的差异。
浏览器内核主要分为两种，⼀是渲染引擎，另⼀个是js引擎，内核更加倾向于说渲染引擎。
常见的浏览器内核可以分四种：Trident、Gecko、Blink、WebkitIE浏览器：Trident内核，也称为IE内核Chrome浏览器：Webkit内核，现在是Blink内核Firefox浏览器：Gecko内核，俗称Firefox内核Safari浏览器：Webkit内核Opera浏览器：最初是⾃⼰的Presto内核，后来加⼊⾕歌⼤军，从Webkit⼜到了Blink内核；360浏览器：IE+Chrome双内核猎豹浏览器：IE+Chrome双内核百度浏览器：IE内核QQ浏览器：Trident（兼容模式）+Webkit（⾼速模式）常见的兼容性问题：1.不同浏览器的标签默认的外补丁（margin）和内补丁（padding）不同解决⽅案：css⾥增加通配符*{margin：0；padding：0}2.IE6双边距问题；在IE6中设置了float，同时⼜设置margin，就会出现边距问题解决⽅案：设置display：inline；3.当标签的⾼度设置⼩于10px，在IE6、IE7中会超出⾃⼰设置的⾼度解决⽅案：超出⾼度的标签设置overflow：hidden，或者设置line-height的值⼩于你的设置⾼度4.图⽚默认有间距解决⽅案：使⽤float为img布局5.IE9以下浏览器不能使⽤opacity解决⽅案：opacity：0.5；filter：alfha（opacity=50）；filter：progid：DXlmageTransform.Microsoft.Alfha(style=0,opacity=50);6.边距重叠问题；当相邻两个元素都设置了margin边距时，margin将取最⼤值，舍弃最⼩值；7.cursor：hand显⽰⼿型在safari上不⽀持解决⽅案：统⼀使⽤cursor：pointer8.两个块级元素，⽗元素设置了overflow：auto；⼦元素设置了position：relative；且⾼度⼤于⽗元素，在IE6、IE7会被隐藏⽽不是溢出；解决⽅案：⽗级元素设置position：relative9.const问题说明：Firefox下，可以使⽤const关键字来定义常量；IE下，只能使⽤var关键字来定义常量。
前端开发中常见的浏览器兼容性问题与解决方案随着移动互联网及云计算的迅速发展，前端开发也越来越重要。
然而，不同浏览器之间的差异性造成了许多兼容性问题，给开发者带来了不小的困扰。
本文将介绍一些前端开发中常见的浏览器兼容性问题，并提供一些解决方案。
一、CSS兼容性问题1. 盒模型差异：不同浏览器对盒模型的解析方式有所不同，主要体现在边框和内边距的计算上。
解决方案是使用CSS的box-sizing属性将盒模型设置为border-box，以保证在不同浏览器中的显示效果一致。
2. 行内元素的内外边距：在IE6及更早的版本中，行内元素会忽略内外边距的设置。
解决方案是将行内元素转换为块级元素，或者使用display:inline-block属性来呈现行内块元素的效果。
3. 清除浮动：不同浏览器对清除浮动的方式支持度各不相同。
常用的清除浮动方法有使用overflow:hidden属性、添加空元素并清除浮动、使用clearfix类等。
二、JavaScript兼容性问题1. DOM操作差异：不同浏览器对于DOM操作的实现方式存在差异，例如通过innerHTML属性插入HTML片段在IE中可能导致内存泄漏。
解决方案是尽量使用createElement和appendChild等原生DOM方法来进行元素的动态创建和操作。
2. 事件处理差异：不同浏览器对于事件处理的机制有所不同，例如IE不支持事件捕获，而是通过attachEvent方法进行事件绑定。
解决方案是使用事件委托的方式来减少事件绑定的数量，同时可以借助框架如jQuery等来解决跨浏览器兼容性问题。
3. AJAX兼容性：不同浏览器对XMLHttpRequest对象的支持有所不同，特别是IE6及更早的版本。
解决方案是使用封装好的Ajax库或者利用浏览器的原生ActiveXObject对象来实现跨浏览器的AJAX请求。
三、HTML5兼容性问题1. 标签支持度不足：HTML5中的一些新标签如<header>、<nav>、<section>等在旧版本的浏览器中可能无法正确解析。
常见浏览器兼容性问题与解决方案所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。
在大多数情况下，我们的需，无论用户用什么浏览器来查看我们的或者登陆我们的系统，都应该是统一的显示效果。
所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。
在学习浏览器兼容性之前，我想把前端开发人员划分为两类：第一类是精确按照设计图开发的前端开发人员，可以说是精确到1px的，他们很容易就会发现设计图的不足，并且在很少的情况下会碰到浏览器的兼容性问题，而这些问题往往都死浏览器的bug，并且他们制作的页面后期易维护，代码重用问题少，可以说是比较牢固放心的代码。
第二类是基本按照设计图来开发的前端开发人员，很多细枝末节差距很大，不如间距，行高，图片位置等等经常会差几px。
某种效果的实现也是反复调试得到，具体为什么出现这种效果还模模糊糊，整体布局十分脆弱。
稍有改动就乱七八糟。
代码为什么这么写还不知所以然。
这类开发人员往往经常为兼容性问题所困。
修改好了这个浏览器又乱了另一个浏览器。
改来改去也毫无头绪。
其实他们碰到的兼容性问题大部分不应该归咎于浏览器，而是他们的技术本身了。
文章主要针对的是第一类，严谨型的开发人员，因此这里主要从浏览器解析差异的角度来分析兼容性问题。
浏览器兼容问题一：不同浏览器的标签默认的外补丁和补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding 差异较大。
碰到频率:100%解决方案：CSS里 *备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS 文件开头都会用通配符*来设置各个标签的外补丁是0。
浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大问题症状:常见症状是IE6中后面的一块被顶到下一行碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）解决方案：在float的标签样式控制中加入 display:inline;将其转化为行属性备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin 实现，这就是一个必然会碰到的兼容性问题。
前端兼容性面试题在前端开发中，兼容性是一个非常重要的考虑因素。
由于不同浏览器、操作系统和设备之间存在差异，开发者需要确保网站或应用程序能够在各种环境下正常运行。
为了帮助你准备前端兼容性面试，下面将介绍一些常见的兼容性问题以及解决方案。
一、CSS兼容性1. 盒模型差异盒模型指的是元素的宽度和高度的计算方式。
在标准盒模型中，元素的宽度和高度不包括边框和内边距。
而在IE盒模型中，元素的宽度和高度包括边框和内边距。
解决方案：使用CSS的box-sizing属性，将其值设置为border-box，可以统一盒模型的计算方式。
2. 浮动与清除浮动在某些浏览器中，浮动元素可能会导致父容器的高度塌陷，影响页面布局。
解决方案：可以使用clearfix类来清除浮动，或者使用伪元素::after来清除浮动。
3. CSS选择器的兼容性不同浏览器对CSS选择器的支持程度不同，某些选择器可能无法在所有浏览器中正常工作。
解决方案：选择合适的选择器，或者使用JavaScript来处理特定的选择器。
二、JavaScript兼容性1. DOM操作差异不同浏览器对DOM操作的支持也存在一定差异，例如访问和修改元素的属性、样式、事件处理等。
解决方案：使用现代的方法和属性，如果必须要兼容旧版本的浏览器，可以使用条件注释或特性检测来判断浏览器并采取相应的方式。
2. 事件处理在将事件绑定到元素上时，不同浏览器对事件处理的方式也不同，例如事件监听、事件对象的获取等。
解决方案：使用现代的事件处理方式，例如addEventListener方法，并使用条件注释或特性检测来处理旧版浏览器。
三、响应式设计与移动兼容性1. 媒体查询在响应式设计中，使用媒体查询可以根据不同的屏幕尺寸应用不同的样式。
解决方案：使用CSS3的媒体查询，并提供兼容性样式备用。
2. 移动设备兼容性移动设备上的浏览器可能与桌面浏览器在CSS和JavaScript的支持上存在差异。
解决方案：使用移动优先的设计方法，适当使用前缀生成器和流行的移动端框架如Bootstrap等。
浏览器兼容性问题的解决方案随着互联网的不断发展，浏览器已经成为人们日常生活中必不可少的工具之一。
然而，不同的浏览器和浏览器版本之间的兼容性问题却给网站开发和维护带来了诸多麻烦。
本文将探讨浏览器兼容性问题带来的影响以及解决方案。
一、浏览器兼容性问题的影响1.用户体验不佳在不同的浏览器和版本下，网站的显示效果和交互体验往往差异很大，这会导致用户在使用网站时出现卡顿、界面错乱、功能失效等问题，影响用户的使用体验。
2.网站表现不佳由于不同的浏览器对网站代码的解释和执行方式不同，故网站在兼容性方面存在一定的缺陷。
这会导致网站在某些浏览器和版本下出现性能问题，例如加载速度变慢、页面响应时间变长等。
3.网站SEO降低由于不同的浏览器在搜索引擎中的排名不同，因此网站在兼容性方面出现问题会直接影响网站的搜索排名和SEO结果，降低网站被搜索引擎收录的概率和搜索排名。
二、1.编写符合标准的HTML、CSS和JavaScript代码兼容性问题的主要原因是网站代码不符合标准，因此，编写符合标准的代码是避免兼容性问题的基本手段。
在编写代码时要符合W3C标准，并注意不要使用浏览器非标准的属性和方法。
2.尽量避免使用特定浏览器的特定功能尽量避免使用特定浏览器的特定功能，以避免兼容性问题。
如果非常需要使用某个功能，则需要对该浏览器进行特别处理。
这可以通过JavaScript语言的特异性或条件注释来实现。
3.使用开源框架开源框架具有成熟的代码库，同时还能避免浏览器兼容性问题的发生。
常见的开源框架包括React、Angular和Vue.js等。
4.使用CSS Reset或Normalize.cssCSS Reset可以将所有浏览器的默认样式清空，从而减少兼容性问题的发生。
Normalize.css则可以实现一些浏览器的标准一致，从而让网站表现更稳定。
5.使用polyfillPolyfill是一种用于填补不同浏览器功能缺失的JavaScript库。
前端框架技术中常见的浏览器兼容性问题及解决方案在前端开发过程中，浏览器兼容性问题一直是一个头疼的难题。
由于不同浏览器的渲染引擎和规范解释存在差异，导致同样的前端代码在不同浏览器上可能会呈现不同的效果甚至出现错误。
为了提供用户一致的体验，我们需要了解并解决常见的浏览器兼容性问题。
一、CSS兼容性问题1. 盒模型差异Chrome、Firefox以及Safari使用的是W3C标准的盒模型，而IE使用的是传统的IE盒模型。
解决方案是使用CSS的box-sizing属性来明确指定所使用的盒模型。
```box-sizing: border-box; /*使用W3C的盒模型*/box-sizing: content-box; /*使用传统的IE盒模型*/```2. 浮动清除在IE6及其以前的版本中，浮动元素没有被正确的清除，可能会导致父容器的高度无法自适应。
解决方案是使用clearfix类或者在父容器上添加clear属性。
```.clearfix::after {content: "";display: table;clear: both;}```3. 层叠样式兼容性不同浏览器的CSS样式的优先级计算存在差异，可能导致样式覆盖问题。
解决方案是合理使用选择器和样式优先级，避免出现覆盖问题。
二、JavaScript兼容性问题1. DOM操作差异不同浏览器对于DOM操作的实现存在差异，可能导致相同的DOM操作代码在不同浏览器上出现错误。
解决方案是使用现代的DOM操作API，如querySelector、addEventListener等，或者使用框架提供的封装方法。
2. 事件处理不同浏览器对于事件处理的实现存在差异，可能导致事件处理代码在不同浏览器上有兼容性问题。
解决方案是使用框架提供的事件处理方法，如jQuery的事件处理方法，或者使用addEventListener来注册事件。
3. AJAX兼容性不同浏览器对于XMLHttpRequest对象的实现存在差异，可能导致AJAX代码在不同浏览器上无法正常工作。
web前端兼容性面试题随着互联网的快速发展和多样化的设备和浏览器的出现，保证网站在各种环境下的正常运行变得越来越重要。
在Web前端开发中，兼容性问题一直是工程师需要面对和解决的挑战之一。
在此，我们将讨论一些常见的Web前端兼容性面试题，并给出相应的解答和解决方案。
1. 什么是网页兼容性问题？网页兼容性问题是指网页在不同的浏览器、不同的浏览器版本或不同的设备上显示或运行出现的问题。
这些问题可能包括布局错乱、字体显示不一致、交互效果异常等。
2. 请列举几种常见的浏览器兼容性问题。
- 盒模型差异：不同浏览器对盒模型的计算方式不同，导致元素的宽度和高度在不同浏览器中显示不一致。
- CSS属性兼容性：某些CSS属性在不同浏览器中可能有不同的写法或表现效果。
- JavaScript兼容性：不同浏览器对JavaScript的解析和支持程度可能不同，导致代码在部分浏览器中无法正确执行。
- 响应式布局：不同设备的屏幕尺寸和分辨率不同，需要针对不同设备做出布局调整，以适应不同的显示效果。
- 图片加载：不同浏览器对图片的加载和渲染方式可能不同，可能导致图片显示异常或加载失败。
3. 如何解决浏览器兼容性问题？- 使用CSS Reset或Normalize.css来重置浏览器的默认样式，以便保证在不同浏览器中显示的效果更加一致。
- 使用CSS Hack或条件注释来针对特定的浏览器或浏览器版本提供不同的样式。
- 使用CSS前缀来兼容不同浏览器的私有属性，例如使用-webkit-前缀兼容Chrome和Safari浏览器。
- 使用JavaScript库或框架，如jQuery或React，它们已经解决了大部分浏览器兼容性问题，并提供了统一的API。
- 进行跨浏览器测试，使用工具如BrowserStack或Sauce Labs，在不同的浏览器和设备上测试网页，并及时修复兼容性问题。
4. 如何处理移动设备上的兼容性问题？- 使用响应式布局或流式布局，通过CSS媒体查询来适应不同的设备尺寸和分辨率。
兼容性面试题兼容性是指系统、软件、硬件或者其他设备在不同的环境中能够正确地运行并且相互协作的能力。
在软件开发领域，兼容性测试是一项重要的工作，旨在确保软件在不同的操作系统、浏览器、设备等环境中都能够正常运行。
下面是一些常见的兼容性面试题，帮助你更好地了解和掌握兼容性测试的相关知识。
1. 什么是兼容性测试？为什么需要进行兼容性测试？兼容性测试是指在不同的操作系统、浏览器、设备等环境中测试软件的稳定性和兼容性，以保证软件在各种环境下都能够正常运行。
兼容性测试的目的是发现和解决软件在不同环境中出现的问题，提高软件的适应性和可用性。
2. 兼容性测试有哪些常见的测试对象？兼容性测试的对象多种多样，常见的包括操作系统（如Windows、Mac OS、Linux等）、浏览器（如IE、Chrome、Firefox、Safari等）、设备（如手机、平板、笔记本、台式机等）、数据库（如MySQL、Oracle、SQL Server等）等。
3. 兼容性测试的主要测试方法有哪些？兼容性测试的主要测试方法包括：- 平台兼容性测试：测试软件在不同操作系统和平台下的运行情况。
- 浏览器兼容性测试：测试网页在不同浏览器中的显示效果和兼容性。
- 设备兼容性测试：测试软件在不同设备上的运行情况，如手机、平板等。
- 数据库兼容性测试：测试软件与各种数据库之间的兼容性和稳定性。
4. 兼容性测试的具体流程是怎样的？兼容性测试的具体流程可以按照以下步骤进行：- 确定测试的目标和范围。
- 准备测试环境，包括不同的操作系统、浏览器、设备等。
- 编写测试用例，包括功能测试、界面测试、数据测试等。
- 执行测试用例，并记录测试结果。
- 分析测试结果，发现和解决问题。
- 生成测试报告，并进行总结和评估。
5. 兼容性测试中常见的问题有哪些？在兼容性测试中，常见的问题包括：- 页面在不同浏览器中的显示效果不一致。
- 功能在不同操作系统下的表现不同。
- 用户界面在不同设备上的布局不正常。
1.注释标签常用语法1.1注释的注意事项1.2出错条件1.3注释中多个地方出错时1.4两个出错的注释标签，其间的内容被视为注释的一部分1.5解决方案2.浏览器的字符编码2.1问题描述各浏览器对于字符编码别名支持的宽泛程度有差异，当指定了浏览器无法识别的字符编码别名时，浏览器会以确定编码的优先级顺序采用设置的更低优先级的字符编码，以此类推。
而 Chrome Safari Opera 中对字符编码别名有着比其他浏览器更宽泛的支持。
2.2文档的字符编码顺序针对如何确定一个文档的字符编码，用户代码必须遵守下面的优先级顺序（优先级由高至低）：（1）HTTP "Content-Type" 字段中的 "charset" 参数。
（2）META 声明中 "http-equiv" 为 "Content-Type" 对应的值中的 "charset" 的值。
（3）元素的 charset 属性。
2.3实例1上面是一段 PHP 代码，HTTP "Content-Type" 头字段设置了字符编码为 BIG5，页面中的 META 元素设置了字符编码为 UTF-8，页面本身的编码类型为 GB2312。
页面执行时，通过脚本输出了当前浏览器所采用的字符编码类型。
这个动态页面在各浏览器中运行时均显示出了 BIG5，可见此时所有浏览器均遵照HTML4.01 规范所述，以更高优先级的 HTTP "Content-Type" 头字段的 "charset" 参数的值作为字符编码类型。
2.4各浏览器默认编码格式上面页面中没有设定任何的字符编码信息，则各浏览器对于这个页面将使用各自的默认编码。
页面自身的编码为 GB2312。
各浏览器中运行效果如下：2.5实例2上面的动态页面自身的编码为 BIG5，HTTP "Content-Type" 头字段设置了字符编码为 maccyrillic，页面中的 META 元素设置了字符编码为 b.i.g+5。
各浏览器中运行效果如下：在 IE6 IE7 IE8 Firefox 中，浏览器无法识别 maccyrillic 这种字符编码别名，所以寻找更低优先级的 META 元素声明的字符编码，但发现也无法识别 b.i.g+5 这种字符编码别名，继而采用了当前语言版本的默认编码 GB2312，与页面自身的字符编码 BIG5 不相符，导致页面中的文字显示异常。
在 Chrome Safari 中，浏览器将 maccyrillic 识别为合法的 X-MAC-CYRILLIC，则不再理会更低优先级的编码设置，页面采用 X-MAC-CYRILLIC 作为字符的编码，与页面自身的 BIG5 编码不符，导致页面中的文字显示异常。
在 Opera 中，浏览器无法识别 maccyrillic 这种字符编码别名，所以寻找更低优先级的 META 元素声明的字符编码，将 b.i.g+5 这种字符编码别名识别为 BIG5，刚好与页面自身的 BIG5 字符编码相符，所以页面中的文字显示正常。
出现上述现象的原因主要有三点：（1）各浏览器的字符编码别名表不尽相同，对同一种编码下的各种别名支持的宽泛程度不一样。
像 maccyrillic 这种别名在 Chrome Safari 可以识别为通用的X-MAC-CYRILLIC，但其他浏览器则会将其视作错误的字符编码信息处理。
（2）各浏览器在匹配页面的字符编码与别名表中的字符编码时，匹配的方式不同。
Chrome Safari Opera 会将编码类型的字符串做一个转换，过滤了除英文大小写字符、数字字符之外的字符（isASCIIAlphanumeric）。
如 ISO8859_5 会以转换后的 ISO88595 与别名表中的 ISO-8859-5 转换后的 ISO88595 做比较，b.i.g+5 也会转换为 big5 与别名表中的做比较，所以浏览器可以正确识别这些设置的字符编码为浏览器内部的别名。
（3）各浏览器的默认字符编码不同。
注1：各浏览器均可以识别X-MAC-CYRILLIC 这种通用的字符编码别名2.6解决方案首先，对于动态页面必须确保 HTTP "Content-Type" 头字段的 "charset" 参数与页面自身编码相符，且务必在页面的 META 元素中也声明相符的字符编码信息。
对于静态页面，必须保证页面中 META 元素声明中 "http-equiv" 为 "Content-Type" 对应的值中的 "charset" 的值与页面自身编码相符。
其次，在设置字符编码别名时，最好使用最通用的、各浏览器均可识别的编码别名。
下面列出了部分的字符编码及其推荐的通用的别名在各浏览器中的支持情况：3. URI 中非ASCII 字符的处理3.1规范根据 HTML 4.01 规范中的描述，URI 中不应该包含非 ASCII 字符。
如以下 href 属性的值是不合法的：<A href="/Håkon">...</A>规范中建议，用户端在这种情况下应采取以下方式处理非 ASCII 字符：（1）将每个字符转换为 UTF-8 编码的相同字符，每个字符将有一或多个字节。
（2）用 URI 编码机制对这些字节进行编码。
如：每个字节转换为 %HH，其中的 HH 为这些字节的值的十六进制表示。
这种方式称为“百分号编码”。
3.2问题分析下面测试各种情况下各浏览器对于 URI 中非 ASCII 字符的编码方式。
在应用中经常使用的编码是 GB2312 和 UTF-8，一个汉字在 GB2312 编码下占 2 个字节，在 UTF-8 编码下占 3 个字节，因此通过对比这两种编码更容易看出区别。
下面的例子中将分别使用这两种编码测试。
●测试使用的非 ASCII 字符均为中文字符“汉”，“汉”在 GB2312 编码中的字节码为“BA BA”，在 UTF-8 编码中的字节码为“E6 B1 89”。
●测试结果的截图中，所有字符均为 ASCII 编码，GB2312 编码的“汉”以 ASCII 编码显示时，为“ºº”，UTF-8 编码的“汉”以 ASCII 编码显示时，为“æ±ﾱ”（第三个字节在 ASCII 字符集中无对应字符，因此显示为“ﾱ”）。
●测试的访问地址均为：http://local.test/BrowserName/汉?汉=汉为了便于区分各浏览器的表现，BrowserName 将在测试中替换为各浏览器名。
●另外，当声明一段测试代码是 GB2312 编码时，其含义为该 HTML 文件的编码为GB2312，并且在该文件中声明了：<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>同样，当声明一段测试代码是 UTF-8 编码时，其含义为该 HTML 文件的编码为UTF-8，并且在该文件中声明了：<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>注：1. 此处的“汉”字，在不同测试中，实际的编码也不相同。
3.2.1在浏览器的地址栏直接输入包含非ASCII 字符的URI在各浏览器的地址栏中，直接输入“http://local.test/BrowserName/汉?汉=汉”，结果如下：可见，对于 URI 中的非 ASCII 字符：●在 path 部分，所有浏览器都使用了 UTF-8 并做了百分比编码。
●在 query 部分，IE 使用了 GB2312，未做百分比编码；Firefox 和 Opera 使用了GB2312，做了百分比编码；Chrome 和 Safari 则仍使用 UTF-8 并做了百分比编码。
注：1. 因各浏览器的地址栏使用的编码未能确定，本测试仅强调URI 中非ASCII 字符最终使用的字符集。
3.2.2链接跳转或使用脚本跳转到包含非ASCII 字符的URI在不同的编码下，测试以下两段代码：点击按钮或链接后，各浏览器实际发送的 URI 如下：可见，对于 URI 中的非 ASCII 字符：●在 path 部分，所有浏览器都转换为 UTF-8，做了百分比编码。
●在 query 部分，IE 使用当前编码，未做百分比编码；其他浏览器则使用当前编码做百分比编码。
3.2.3使用Ajax请求包含非ASCII 字符的URI（get）在不同的编码下，测试以下代码：点击按钮后，各浏览器实际发送的 URI 如下：可见：（1）IE 无视页面编码设置，将任意编码的字符转换为 GB2312 发送请求，并且对于URI 中的非 ASCII 字符处理如下：●在 path 部分，IE6 并未处理；IE7 IE8 则做百分比编码。
●在 query 部分，IE 并未对其处理。
（2）其他浏览器对于 URI 中的非 ASCII 字符处理如下：●在 path 部分，均转换为 UTF-8 并做百分比编码。
●在 query 部分，Firefox Opera 转换为 UTF-8 并做百分比编码，ChromeSafari 则使用当前编码做百分比编码。
注：1. 这段代码仅为测试编码用，因此并未设置Ajax 请求的回调函数及后续处理，并且对于IE7 IE8，使用XMLHttpRequest 创建的xhr 对象和使用ActiveXObject 创建的xhr 对象的测试结果没有区别。
2. 假设这段代码所在域为local.test，即不会有跨域的问题。
3.3差异总结3.3.1地址栏直接输入：3.3.2点击链接跳转或使用脚本跳转：3.3.3使用Ajax 的get 方法请求：3.4解决方案当 URI 中含有非 ASCII 字符时，不要依赖浏览器对 URI 的编码方式，以避免产生差异。
建议：▪在使用此 URI 之前，先对其进行处理，如使用 JS 的 encodeURI 或encodeURIComponent 方法（JS 的这两个方法会将字符串转换为 UTF-8 并做百分比编码）。
▪在使用 XHR 对象发送 Ajax 请求时，如果仅在 query 部分含有非 ASCII 字符，请使用 post 方法发送，并在 send 之前使用xhrObject.setRequestHeader("Content-Type","application/x-www-form-urlenco ded")。
