IE6,IE7,IE8区别-IE兼容性
如何解决同时使用IE6、IE7、IE8及网页兼容问题
如何解决同时使用IE6、IE7、IE8及网页兼容问题如何解决同时使用IE6、IE7、IE8及网页兼容问题作者：武汉创研人气：0 标签：浏览器兼容问题 IE6、7、8 有时候建设好的网站在IE7中能正常显示，但在IE8中就会出现错位情况，其实，只需要在网页中的HEAD内加行代码即可同时兼容IE7和IE8：至于IE6、IE7及火狐的兼容问题就太多了，网络上也有大量解决办法，所以不再一一叙述，只讲这个IE7和IE8兼容的简单问题。
而有些做网页构架的朋友则会遇到一个很烦的问题，就是个浏览器对CSS 的解析不同问题，会导致很多错误，经常需要在各个浏览器中浏览测试，但WINDOWS默认不允许同时安装IE6或IE7、IE8 ，那就只能在不同电脑中跑着浏览测试吗？不用，完全可以解决此问题。
IE6与IE7共存解决办法：1、下载IE7，这一步必不可少的。
2、用WinRar或WinZip之类的软件，把下载的IE7的exe可执行文件，解压到任意一个文件夹内。
3、下载Download Internet Explorer 7 standalone Zip 很小的，149KB。
4、把上面一步下载的ZIP包解压到任意一个文件夹之后，会得到的IE7s.exe和LICENSE.RTF两个文件。
把IE7s.exe 复制到刚刚你IE7解压出来的文件夹内。
5、在你解压的IE7的文件夹内，有一个update文件夹，执行其中的xmllitesetup.exe。
6、最后一步，运行IE7s.exe，会弹出一个命令框对程序进行注册，等待一会，就会弹出美丽的IE7了。
你再打开IE6看看，是不是可以同时用了？IE7与IE8共存解决办法：安装IE8，IE8状态下，如要变成IE7，按下状态栏的“7Emulate IE7”按钮，确定，然后退出浏览器，再重新打开，发现现在就是IE7了。
IE7状态下，如要变回IE8，点击一下“7Emulate IE7”按钮，确定，恢复弹出的形状，然后退出浏览器，再重新打开，发现现在就是IE8了。
IE面试储备知识
IE面试储备知识一、什么是IE？IE（Internet Explorer）是微软公司开发的一款网页浏览器。
在过去的几十年中，IE曾经是最受欢迎的浏览器之一，但是随着时间的推移，它的市场份额逐渐被其他浏览器所取代。
尽管如此，仍然有很多公司和个人在使用IE浏览器，因此对IE面试储备知识的了解仍然非常重要。
二、IE的版本IE的版本众多，下面列举一些主要的版本及其特点。
1.IE6：IE6是在2001年发布的，是IE系列中使用最广泛的版本之一。
然而，IE6存在许多安全漏洞和兼容性问题，因此使用IE6已经不再推荐。
2.IE7：IE7在2006年推出，它引入了一些新的功能和改进，如选项卡式浏览、RSS阅读等。
但是，IE7仍然存在许多兼容性问题。
3.IE8：IE8在2009年发布，它进一步提升了兼容性和安全性。
IE8引入了开发者工具和加速度渲染等功能，使得用户体验更加流畅。
4.IE9：IE9在2011年发布，它在性能、安全性和兼容性方面都有了显著的提升。
IE9支持HTML5和CSS3等新的Web标准。
5.IE10：IE10在2012年发布，它进一步改进了性能和兼容性。
IE10还加入了一些新的特性，如触摸支持和全屏浏览模式。
6.IE11：IE11在2013年发布，它是IE系列的最后一个版本。
IE11继续加强了性能、安全性和兼容性，并且支持更多的Web标准。
三、IE面试中可能涉及的问题在IE面试中，以下是一些可能会被提及的问题：1.请介绍一下IE的历史和版本。
2.你在开发过程中如何处理IE的兼容性问题？3.请简要说明IE中的盒模型是什么？4.你如何处理IE中的浮动问题？5.请解释一下IE中的事件冒泡和事件捕获。
6.请简要介绍一下IE中的XMLHttpRequest对象。
7.你在开发过程中如何处理IE中的缓存问题？8.请解释一下IE中的跨域请求问题以及解决方案。
四、IE面试备考建议在备考IE面试时，以下是一些建议可以帮助你更好地准备：1.对IE的历史和版本要有一定的了解，了解每个版本的特点和主要改进。
ie8
IE 8兼容性分析经验分享Internet Explorer专家级工程师梅开盛IE的”进程-线程-窗口”架构演化(6-7-8)。
如何利用IE 8的兼容模式。
IE 8中针对JavaScript的改动及注意事项。
小议IE的安全机制。
有效的利用IE8的开发工具栏。
如何使用Application CompatibilityToolkit(ACT)快速定位兼容性问题。
热点问题讨论（内存泄露，脚本性能，并发连接数限制）。
23 456 选项卡与框架(frame)分离,不在同一进程中同一窗口下不同的选项卡可能运行在不同的进程中.同一窗口下不同的选项卡可能有不同的完整性级别(与IE7不同)演示 -- 谁在选项卡进程异常退出后恢复？78 HKCU\Software\Microsoft\Internet Explorer\Main –TabProcGrowthTabProcGrowth=0: 恢复IE7模式.TabProcGrowth =1: 一个框架进程下(frame process)只有一个标签页进程(tab process)注：如果启用保护模式，则有可能是两个，即每个模式下一个页面进程TabProcGrowth = n;n>1:在一个完整性级别下，最多有n个选项卡进程，达到限制后，标签管理器负责负载平衡。
9 HKCU\Software\Microsoft\Internet Explorer\Main - FrameMerging(dword) //帧合并0 –关闭1 –打开（缺省）“FrameMerging” (MFP/帧合并) 打试图打开一个新IE 进程时，IE自己会创建一个新的选项卡，并把它合并到一个现存的框架进程中。
使用参数覆盖系统设定：“-FrameMerging” –强制合并““-NoFrameMerging” –强制打开建立一个新的框架进程。
.10 HKCU\Software\Microsoft\Internet Explorer\Main - SessionMerging(dword) //会话合并0 –关闭1 –打开缺省如果关闭，打开一个iexplore.exe，虽然在帧合并的情况下，但是会有一个新的选项卡进程打开。
【珍藏版】IE6,IE7,IE8,Firefox等浏览器兼容的css hack
IE6，IE7，IE8，Firefox等浏览器兼容的css hack一、开发平台的选择我很幸运, 我接触网页前台的时候Firefox2 已经十分红火, 我的所有工作都是在Firefox 上展开, 同时兼容其他浏览器的. 这样做肯定会比在IE 做好再到别的浏览器兼容来得容易, 因为IE 对老标准支持还是很不错的, 而IE 的一些特有功能人家却不支持. 所以我推荐以Firefox 结合Firebug 扩展作为平台.在解决兼容方法上，想定出一个统一的规范，个人认为应该以下面3点为基本原则：权衡成本：在浏览器被淘汰后，如何快速清理掉无用代码可维护：在资源成本和完美间平衡的向后兼容可读：省力、易记二、Hack 的顺序使用Firefox 作为平台, 只要代码写得够标准, 其实要Hack 的地方不会很多的, IE 以外的浏览器几乎都不会有问题, 所以可以暂时忽略,顺序如下:Firefox -> IE8 -> IE7 -> IE6 -> 其他三、CSS 选择器Hack/* Opera */@media all and (-webkit-min-device-pixel-ratio:10000), not all and(-webkit-min-device-pixel-ratio:0){head~body .sofish{display:block;}}这种写法的优缺点是：优点：全面，各种HACK都有；清理无用代码里易认缺点：选择器名称不易记；代码量多（要重复写选择器）四、CSS 属性Hack.sofish{padding:10px;padding:9px\9; /* all ie */padding:8px\0; /* ie8-9 */*padding:5px; /* ie6-7 */+padding:7px; /* ie7 */_padding:6px; /* ie6 */}这种写法的优缺点是：优点：易记；代码少缺点：不全面五、IE 注释<!--[if IE]>IE only<![endif]--><!--[if !IE]>NOT IE<![endif]-->这种写法的优缺点是：优点：安全；向后兼容好；易维护缺点：用不好会增加HTTP请求；用得好代码又多六、浏览器探测：JS/后端程序判断// 以jQuery为例，检测是否是IE6，是则加上class="ie6" if ($.browser.msie && $.browser.version = 6 ){ $('div').addClass('ie6');}这种写法的优缺点是：优点：全面；易维护；可读性高缺点：占资源；代码量大（要重写选择器）总结：-----------------1、尽量使用单独HACK这样维护起来成本比较低，改动不会影响其他的浏览器，而一旦有浏览器淘汰，只要搜索关键字，就可以批量去掉这些代码。
IE基础知识培训
IE基础知识培训1. 什么是IE（Internet Explorer）？IE（Internet Explorer）是微软公司开发的一款网页浏览器软件，也是Windows操作系统的默认浏览器。
IE是最早的网页浏览器之一，自1995年首次发布以来，一直是互联网世界中最常用的浏览器之一。
IE提供了用户浏览网页、下载文件、管理收藏夹等功能，同时还支持网页的开发和调试。
2. IE版本演进IE的版本经历了多次更新和演进，每个版本都带来了新的功能和技术支持。
以下是一些主要的IE版本：•IE 6：发布于2001年，是IE历史上使用最广泛的版本之一，当时是互联网世界的主导者。
•IE 7：发布于2006年，引入了更多安全功能、标签页浏览、RSS订阅等新功能。
•IE 8：发布于2009年，加强了安全性、兼容性和性能，并引入了开发者工具和加速性能。
•IE 9：发布于2011年，在性能、安全性和兼容性方面做出了重大改进，引入了新的界面设计。
•IE 10：发布于2012年，加强了HTML5、CSS3等Web标准的支持，并提供更流畅的使用体验。
•IE 11：发布于2013年，改进了性能和兼容性，并增强了开发者工具和改进了界面。
3. IE的特性和功能IE作为一款浏览器软件，具有许多特性和功能，以下是一些主要的特性和功能：•网页浏览：IE提供了浏览网页的基本功能，用户可以通过地址栏输入网址、点击链接或使用收藏夹等方式访问网页。
•标签页浏览：IE支持多标签页浏览，用户可以在同一个窗口中同时打开多个网页，并轻松切换。
•下载管理：IE允许用户下载文件，并提供了下载管理功能，用户可以查看下载进度、管理下载任务等。
•收藏夹和历史记录：IE提供了收藏夹和历史记录功能，用户可以收藏喜欢的网页或查看之前浏览过的网页。
•安全性：IE注重用户的安全性，提供了安全提示、弹窗拦截、恶意网站检测等功能，保护用户免受恶意软件的侵害。
•开发者工具：IE提供了丰富的开发者工具，包括控制台、调试器、元素检查等，方便开发人员进行网页调试和开发工作。
IE7和IE8的区别
IE7和IE8的区别IE7和IE8的主要区别有:1. 智能地址栏与内容匹配智能地址栏让用户不仅可以找到所需的网站，还可以把历史记录、收藏夹中的标题同用户输入地址栏的内容进行匹配，不会出现重复的情况。
2. 选项卡分组关联性选项卡分组，让用户可以确认哪个选项卡有相关内容，当点击一个选项卡中的链接而导向另外一个时，新的选项卡会在旁边出现，而且两个选项卡都会用一个颜色进行标记。
3. 右键可点击“新选项卡”页面IE8中的“新选项卡”页进行了重新设计，让用户可以右键点击页面执行常见任务。
4. 重新打开上次浏览的页面在不小心关闭浏览器或浏览器崩溃的情况下，IE8让用户可以重新打开最近浏览的页面。
5. 内查“页面内查找”a) 改进了人们在网页中搜索文本的方式。
b) 页面内查找：按Ctrl+F或者在编辑菜单或即时搜索对话框中选择，即可开启页面内查找功能。
工具条显示在用户的选项卡下面，因此不会阻碍页面上的任何文本。
c) 结果数：强化的页面内查找功能，会显示搜索词在页面中出现的次数。
d) 结果高亮显示：强化的页面内查找功能让用户可以一眼就找到搜索项目，因为搜索文本出现的所有地方都会高亮显示。
6. Slipstream安装可以实现IE8执行的和Windows Vista操作系统映像一部分的定制，不再需要单独安装。
当以这种方式使用IE8时，将成为Windows Vista的一部分，因此改善桌面一致性和可管理性。
7. 设有ⅠE管理工具包收藏夹定制和导入加速器的能力8. 增加140多项设置：IE8控制和配置包括加速器和网页快讯在内的浏览器特性，支持InPrivate、兼容性查看、SmartScreen等区域对象，新增了140多种设置，使总数达到接近1500种，9. 增改七项子系统除了在标准支持方面的改进，IE8也包括面向开发人员的平台特性。
还在很多子系统中改进了性能，例如HTML解析器、级联样式表（CSS）规则处理、标签树作、Jscript解析器、清除对象时间和内存管理，针对开发人员的特性包括：a) CSS 2.1：IE8全面支持CSS 2.1规范，因此网络开发人员和设计人员可以立刻开发网页并在多种浏览器上准确地渲染。
IE6,IE7,IE8,Firefox,Chrome,Safari的CSS hack兼容表
小知识：什么是CSS hack？由于不同的浏览器，比如IE6、IE7、IE8、Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack，也叫写CSS hack。
各浏览器CSS hack兼容表：代码示例：#test{color:red; /* 所有浏览器都支持*/color:red !important;/* Firefox、IE7支持*/_color:red; /* IE6支持*/*color:red; /* IE6、IE7支持*/*+color:red; /* IE7支持*/color:red\9; /* IE6、IE7、IE8支持*/color:red\0; /* IE8支持*/}body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持*/整体测试代码示例：.test{color:#000000;color:#0000FF\0;[color:#00FF00;*color:#FFFF00;_color:#FF0000;}其他说明：1、如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：<meta http-equiv=”x-ua-compatible” content=”ie=7″ />2、body:nth-of-type(1) 如果这样写，表示全局查找body，将会对应第一个<body>。
3、还有其他写法，比如：*html #test{}或者*+html #test{}4、*+html 对IE7的hack 必须保证HTML顶部有如下声明：/TR/html4/loose.dtd5、顺序：Firefox、IE8、IE7、IE6依次排列。
不同浏览器兼容报告
Shuo de——中国金融数据及工具首席服务商IE、FF、Safari、OP不同浏览器兼容报告柯伯勋2011-03-08上海万得资讯科技有限公司Shanghai Wind Information Co., Ltd.地址: 上海浦东新区福山路33号建工大厦9楼邮编Zip : 200120电话T el : (8621)6886 2280传真Fax : (8621)6886 2281Email : sales@主页:1浏览器内核简介浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“解释引擎”，不过我们一般习惯将之称为“浏览器内核”。
负责对网页语法的解释（如HTML、JavaScript）并渲染（显示）网页。
所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。
浏览器内核很多，如果加上所有的几乎没有什么人在用的非商业的免费内核，那么可能大约有10款以上甚至更多，不过通常我们比较常见的大约只有以下四种，下面先简单介绍一下。
1.1Trident：IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到目前的IE8。
Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器涌现（如Maxthon、The World 、TT、GreenBrowser、AvantBrowser等）。
此外，为了方便也有很多人直接简称其为IE内核（当然也不排除有部分人是因为不知道内核名称而只好如此说）。
由于IE本身的“垄断性”（虽然名义上IE并非垄断，但实际上，特别是从Windows 95年代一直到XP初期，就市场占有率来说IE的确借助Windows的东风处于“垄断”的地位）而使得Trident内核的长期一家独大，微软很长时间都并没有更新Trident内核，这导致了两个后果——一是Trident内核曾经几乎与W3C标准脱节（2005年），二是Trident内核的大量Bug等安全性问题没有得到及时解决，然后加上一些致力于开源的开发者和一些学者们公开自己认为IE浏览器不安全的观点，也有很多用户转向了其他浏览器，Firefox和Opera就是这个时候兴起的。
史上最全IE6.IE7.IE9.IE10.谷哥.火狐各浏览器网页兼容性介绍总结
兼，是什么！你会想到是什么，作为一个跟HMTL+CSS打交道的人来说，我只能说，我想到的只有兼容性了，兼容性自始至终困惑着许多人，例如坑爹的IE，是纵多主流浏览器中比较戳的那一个，因BUG手下纵多而闻名，家族几代问题层出不穷。
最坑爹的那个就是IE6，被纵多开发人员包括前端人员所憎恶。
却受许多企业的爱戴。
顺便说一下为什么IE6还在中国活得好好的，IE6是Windows XP中自带的一种浏览器，而Windows XP目前来说是微软开发得比较好也是比较成功的系统，使用人数多。
IE6的稳定性也比较好，目前，大多数企业特别是银行和政府的系统还是使用IE6而不愿升级也是有这方面的原因，IE6之所以盛行当然不只这一些原因，至少IE6什么时候会死那只是时间的问题罢了，在没死之前，我们得保证我们能活着。
好了，接下来来看一下一些兼容性的问题吧，这里只列出数项，日后继续完善。
1.注释引起的血案（1）在注释的时候，如果注释不当，部分浏览器会将会解析错误。
（demo1）如：<!-- 这里是注释内容-->正常显示；<!-- 这里是注释内容- ->时则在IE浏览器下正常显示，在Chrome、Firefox、Safari下不可显示。
或者->也是如此。
解决方法：在进行注释时切记不要着急，看好是否注释有问题，最好能够用VS中自带的注释，以保万无一失。
详见demo1。
（2）注释引发的血案（demo11）文字溢出：问题见demo11,test1：去掉<div style=”float:left;”></div> 中的“float:left”，就会发现多出来的字不见了，页面正常显示；同样去除<div style=”width:350px;float:right;”>中的“float:right”，多余的字也同样消失，页面正常显示。
分析：文字溢出与区块的浮动有关。
test2：把注释放到<div style=”float:left”></div>前面，多余的字消失，页面正常显示把注释放到<div style=”width:350px;float:right;”>我就只有一行字</div>后面，多余的字也同样消失，页面正常显示。
Windows系统下各浏览器兼容性
Windows系统下各浏览器常用CSS HACK汇总表1. 此汇总表中测试浏览器的版本为：微软系统自带：IE6、 IE7、IE8火狐：Firefox 3.6.6Safari：Safari 5.0谷歌浏览器：Chrome 6.0.458.1 devOpera浏览器：Opera 10.602. 其中，多数CSS hack是在selector{property:value;}基础上更改的。
selector代表CSS选择器，property代表CSS特性，value代表特性的值。
3. FF代表Firefox，Ch代表Chorme，Sa代表Safari，Op代表Opera4. Q代表Quirks Mode，S代表Standards Mode。
5. Hack Type列的数字，指的是上面CSS hack的实现方式中的列表号。
1是指“利用浏览器对相同代码的解析和支持的不同实现的hack”，2是指以Firefox或Webkit特有的扩展样式实现的hack。
一定遵守CSS hack的三条原则。
CSS hack是没有办法的时候才使用的解决兼容性问题的招术，是用兼容性问题去解决兼容性问题，无异于饮鸩止渴。
切莫一有兼容性问题就使用，时刻记得改掉用CSS hack修补的问题。
IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例1.区别IE和非IE浏览器CSS HACK代码#divcss5{background:blue; /*非IE 背景藍色*/background:red \9; /*IE6、IE7、IE8背景紅色*/}2.区别IE6,IE7,IE8,FF CSS HACK【区别符号】：「\9」、「*」、「_」【示例】：#divcss5{background:blue; /*Firefox 背景变蓝色*/background:red \9; /*IE8 背景变红色*/*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/}【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。
网页布局的一些兼容性问题汇总
网页布局的一些兼容性问题汇总转自〔zhenrjk博客〕一，如何解决IE7和IE8的BUG微软在IE8提供三种解析页面的形式IE8 Standard Modes ：默认的最标准的形式，严格按照W3C相关规定IE7 Standards Modes ：IE7如今用的解析网页的形式，开起机关是在<head>中参加<meta-equiv="X-UA-Compatible" content="IE=7">Quirks Modes ：IE5用的解析网页的形式，开起机关是删除HTML顶部的DOCTYPE声明注意：不同形式间的网页在IE8中可以互相frame ，因此因不会形式下的DOM和CSS渲染不一样，所以会引发很多问题，务必注意假如你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：<meta -equiv="x-ua-compatible" content="ie=7" />IE8 最新css hack："/9"例:"margin:0px auto/9;".这里的"/9"可以区别所有IE和FireFox."*"IE6、IE7可以识别.IE8、FireFox不能."_"IE6可以识别"_",IE7、IE8、FireFox不能.二，css网页布局兼容性有哪些要点与窍门？IE vs FFCSS 兼容要点：DOCTYPE 影响CSS 处理FF: div 设置margin-left, margin-right 为auto 时已经居中, IE 不行FF: body 设置text-align 时, div 需要设置margin: auto(主要是margin-left,margin-right) 方可居中FF: 设置padding 后, div 会增加height 和width, 但IE 不会, 故需要用!important 多设一个height 和widthFF: 支持!important, IE 那么忽略, 可用!important 为FF 特别设置款式div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px; 然后插入文字，就垂直居中了。
Web前端兼容性指南
Web前端兼容性指南⼀、Web前端兼容性问题⼀直以来，Web前端领域最⼤的问题就是兼容性问题，没有之⼀。
前端兼容性问题分三类：浏览器兼容性屏幕分辨率兼容性跨平台兼容性1、浏览器兼容性问题第⼀次浏览器⼤战发⽣在上个世纪90年代，微软发布了IE浏览器，和⽹景公司的Netscape Navigator⼤打出⼿，1998年⽹景不得不将公司卖给AOL。
没有了对⼿的IE不思进取，W3C标准⽀持发展缓慢，为以后的IE兼容性灾难埋下了伏笔。
到2004年，IE的市场份额达到95%，但在此之后IE的份额逐步遭其他浏览器蚕⾷，主要包括Firefox，Chrome，Safari和Opera。
.2001年8⽉27⽇，微软发布IE6，时隔五年直到2006年才发布了IE7。
2009年3⽉19⽇，经历了众多测试版后，IE8最终发布，虽然IE8针对旧版IE在多⽅⾯做了很⼤改进，但在HTML5、CSS 3等标准⽀持⽅⾯仍落后于其他浏览器对⼿。
这三个版本的IE是所有兼容性问题的最⼤根源，堪称前端噩梦。
IE6、7、8不⽀持HTML5、CSS3、SVG标准，可被判定为“极难兼容”IE9不⽀持Flex、Web Socket、WebGL，可被判定为“较难兼容”IE10部分⽀持Flex（-ms-flexbox）、Web Socket，可被判定为“较易兼容”IE11部分⽀持Flex、WebGL，可被判定为“较易兼容”IE6、7、8、9可视为“⽼式浏览器”IE10、11可视为“准现代浏览器”Chrome、Firefox、Safari、Opera 、Edge可视为“现代浏览器”浏览器与Windows版本份额Statcounter的各项数据以2020年6⽉为基准。
2、屏幕分辨率兼容性问题在不同的屏幕分辨率，浏览器页⾯展⽰差异很⼤。
特别是屏幕分辨率较⼩时，容易发⽣布局错乱。
为了解决这个问题，响应式UI框架应运⽽⽣。
主流桌⾯屏幕分辨率宽度集中在1280~1920，⾼度集中在720~1080；主流平板屏幕分辨率宽度集中在962~1280，⾼度集中在601~800。
IE8兼容解决方案
IE不同版本兼容问题及解决方案(如有其他问题请及时补充)整理：王东银时间：2011-02-10一、概述整理过程中发现页面反应出来的问题，大部分是代码不规范引起的，真正IE 不兼容问题，只占少部分，所以建议在设计页面时，同样按照规范编码，例如：⏹在页面设计过程中，尽量避免使用物理样式控制界面样式，而尽可能的使用css样式控制，如应避免使用<b>加粗</b>，而使用样式font-weight:bold;控制加粗；⏹编写html标签以及标签属性时，都使用小写字母，如<TABLECELLSPACING=”0”>应写成<table cellspacing=”0”>等；⏹编写html属性时，值需要使用英文双引号””括起来，例如：<tablecellspacing=0>应写成<table cellspacing=”0”>等；⏹编写css属性时，应为属性添加单位，如：<div style=”width:25”>应写为<div style=”width:25px”>等；⏹所有标签都要闭合，如<p>…应写成<p>…</p>，<link …>应写成<link …/>等；以上只是简单的举例，详细内容建议参考：XHTML编写标准！在开始之前，介绍一下浏览器的三种模式，HTML4提供了三种DOCTYPE可选择：⏹过渡型（Transitional ）<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml 的写法)。
CSS各浏览器兼容问题整理
目录目录 (1)一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表 (3)1) 区别IE和非IE浏览器 (3)2) 区别IE6,IE7,IE8,FF (3)3) 区别IE6、IE7、Firefox (方法1) (4)4) 区别IE6、IE7、Firefox (方法2) (4)5) 区别IE7、Firefox (4)6) 区别IE6、IE7 (方法1) (4)7) 区别IE6、IE7 (方法2) (5)8) 区别IE6、Firefox (5)二、IE 的if条件Hack (5)三、对齐产生的问题 (6)1) div的居中对齐问题 (6)2) div中文字垂直居中对齐的问题 (7)3) 怎样使一个层垂直居中于浏览器中 (7)4) 如何对齐文本与文本输入框 (7)四、宽高问题 (7)1) IE6下容器的宽度和FF解释不同 (7)2) 页面的最小宽度 (8)3) 为什么无法定义1px左右高度的容器 (8)4) Firefox 关于DIV高度无法自适应 (8)5) div重叠的现象 (9)6) IE与宽度和高度的问题 (9)7) div嵌套时，外层div高度不能自适应 (10)8) div嵌套时y 轴上外层div 到内层div 的距离的问题 (10)9) padding，marign，height，width 的傻瓜式解决技巧 (10)10) FORM标签 (10)五、浮动 (11)1) margin加倍的问题 (11)2) DIV浮动IE文本产生3象素的bug (11)3) 怎么样才能让层显示在FLASH之上呢 (11)4) float的div闭合;清除浮动 (12)5) 自适应高度 (13)六、列表类 (13)1) UL的padding与margin (13)2) ul和ol列表缩进问题 (14)3) list-style-image无法准确定位 (14)4) LI中内容超过长度后以省略号显示的方法 (14)七、链接 (14)1) 游标手指cursor (14)2) ,给a标签内内容加上样式, (15)3) 链接(a标签)的边框与背景 (15)4) ff不支持expression 例如去掉链接的边框要分别写不同的css (15)5) 超链接访问过后hover样式就不出现的问题 (15)八、背景、图片类 (15)1) IE6下为什么图片下有空隙产生 (15)2) 图片垂直于容器内 (15)3) background 显示问题 (16)4) 背景颜色无法显示 (16)5) 背景透明问题 (17)九、其他问题 (17)1) 如何使连续长字段自动换行 (17)2) 为什么web标准中IE无法设置滚动条颜色了 (18)3) 属性选择器(这个不能算是兼容,是隐藏css的一个bug) (19)4) IE捉迷藏的问题 (19)5) BOX模型解释不一致问题 (19)6) IE6下绝对定位的容器内文本无法正常选择 (19)7) CSS双线凹凸边框 (19)8) IE选择符空格BUG (20)9) ff不支持<body scroll="no" > scroll属性 (21)10) ff不支持数据岛绑定 (21)11) ff不能用.click();方法打开链接 (21)12) 目前FF2.0为止都不支持IE的name锚点 (22)一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表不同的浏览器对CSS的解释都有一点出入，特别是padding, line-height这些要细微控制的地方，下面的hack基本可以解决这个问题：详细查看•在属性前加下划线(_)，那么此属性只会被IE6解释•在属性前加星号(*)，此属性只会被IE7解释•在属性值后面加"\9"，表示此属性只会被IE8解释各浏览器CSS hack兼容表：代码如下:#test{color:red; /* 所有浏览器都支持*/color:red !important; /* Firefox、IE7支持*/_color:red; /* IE6支持*/*color:red; /* IE6、IE7支持*/*+color:red; /* IE7支持*/color:red\9; /* IE6、IE7、IE8支持*/color:red\0; /* IE8支持*/}body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持*/1)区别IE和非IE浏览器【区别符号】：「*」、「\9」#tip{background:blue; /*非IE背景藍色*/background:red\9; /*IE6、IE7、IE8背景紅色*/}（详细查看）2)区别IE6,IE7,IE8,FF【区别符号】：「*」、「_」、「!important」#tip{background:blue; /*Firefox背景变蓝色*/background:red\9; /*IE8背景变红色*/*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/}【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE 各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。
企业网站建设时在各浏览器里兼容问题汇总
企业网站建设时在各浏览器里兼容问题汇总我们在做企业网站建设的时候，往往会遇到一个问题，就是做出来的页面在IE8下不兼容，或者是在IE6下不兼容，而且现在的浏览器有很多种，要么这个行了，那个又不行，这样的问题相信很多人都有遇到过，那么如何来解决呢，下面就来看看天柱网络小编是如何来解决这个问题的。
1、ie8下兼容问题，这个最好处理，转化成ie7兼容就可以。
在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了。
2、flaot浮动造成IE6下面双倍边距问题，这个最常见，也最好处理，!important 解决，比如margin-left:10px !important;/*IE7,IE8,FF下是10PX*/;margin-left:5px;/*IE6下属性写的是5PX，但在显示出来的是10px*/3、清除块display，这个可以解决浮动造成的块，造成块后，当DIV背景填色或填图片的时候，会出现背景断开或差一小块。
解决方法是在出现兼容的DIV的CSS中写一个display:block，或其它属性，中文什么意思我不知道，我英语差，但能达到想要的效果。
4、很多朋友DIV+CSS的时候，会出现，在IE的几个浏览器下都好了，但是在FF出问题了，用!important又会把IE7做的不兼容，有没有什么方法只对FF下进行操做，我用过这个方法，就是在属性前面加符号如：*、&，￥，#，@，?，+，加过符号的属性只有IE的浏览器才识别，而FF不识别，方法如下(注意有符号的属性和没符号的属性的顺序)height:100px;/*FF下显示100的高*/height:120px;/*IE678下显示120高*/5、有时候，会在布局的时候，发现，有一个DIV浮动了，接下来的一个DIV本来是要在下面显示的，结果跑上面去了，这种情况一般在FF下面会出现，解决的办法就是清除一下浮动，在设置过浮动的那个DIV下面加一个DIV，CSS里面写个clear:both;如下6、再就是局中问题，主要原因是对盒子模型不够理解，没熟记盒子模型，如果发现你的页面没有局中，一般有这两个原因：（1）一个是没盒子，就是BODY后的一个大DIV把所有DIV装起来的那个，你没写。
div+CSS浏览器兼容问题整理（IE6.0、IE7.0,ie8,FireFox..
div+CSS浏览器兼容问题整理（IE6.0、IE7.0,ie8,FireFox..CSS技巧1.div的垂直居中问题vertical-align:middle; 将⾏距增加到和整个DIV⼀样⾼ line-height:200px; 然后插⼊⽂字，就垂直居中了。
缺点是要控制内容不要换⾏powered by 25175.2. margin加倍的问题设置为float的div在ie下设置的margin会加倍。
这是⼀个ie6都存在的bug。
解决⽅案是在这个div⾥⾯加上display:inline;例如：<#div id=”imfloat”>相应的css为#IamFloat{float:left;margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/}3.浮动ie产⽣的双倍距离#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产⽣200px的距离 display:inline; //使浮动忽略}这⾥细说⼀下block与inline两个元素：block元素的特点是,总是在新⾏上开始,⾼度,宽度,⾏⾼,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同⼀⾏上,不可控制(内嵌元素);#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同⼀⾏排列的效果 diplay:table;4 IE与宽度和⾼度的问题IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。
这样问题就⼤了，如果只⽤宽度和⾼度，正常的浏览器⾥这两个值就不会变，如果只⽤min-width和min-height的话，IE下⾯根本等于没有设置宽度和⾼度。
⽐如要设置背景图⽚，这个宽度是⽐较重要的。
要解决这个问题，可以这样：#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}5.页⾯的最⼩宽度min -width是个⾮常⽅便的CSS命令，它可以指定元素最⼩也不能⼩于某个宽度，这样就能保证排版⼀直正确。
软件兼容性测试
软件兼容性测试1软件兼容性与软件兼容性测试兼容性问题，即应用程序在不同的环境中，是否会因接口、函数的不同而发生错误的问题。
1.1软件兼容性软件兼容性是指某个软件能稳定地工作在某操作系统/平台之中，就说这个软件对这个操作系统/平台是兼容的，再就是在多任务操作系统中，几个同时运行的软件之间如果能稳定地工作，就说这几个软件之间的兼容性好，否则就是兼容性不好。
另一种情况是软件共享的数据，几个软件之间无需复杂的转换，即能方便地共享相互间的数据，也称为兼容。
因此，软件兼容性是衡量软件好坏的一个重要指标。
从这个意义上看,软件兼容性不良就是软件推广的最大阻碍，例如在微软历史上花费人力财力最多的Vista系统，发布了半年之久依然是叫好不叫座，据说原因之一是软件兼容性最为用户所诟病。
1.2软件兼容性测试软件兼容性测试是指测试软件在特定的硬件产台上、不同的应用软件之间、不同的操作系统平台上、不同的网络等环境中是否能很好地运行的测试。
简单的说，兼容性测试是指测试某新开发的软件在某一特定环境下与各种软件的协调性，软件之间能否很好的运作。
例如，会不会有相互不良的影响，还有软件和硬件之间能否发挥很好的效率工作，会不会影响或导致系统的崩溃等。
1.3配置测试与软件兼容性测试配置测试是指验证在不同的硬件配置和软件配置下，应用程序能否正常工作。
配置测试的目的是保证软件在其相关的硬件上能够正常运行，而兼容性测试主要是测试软件能否与不同的软件正确协作。
软件兼容性测试〔Software Compatibility Testing〕是指检查软件之间是否能够正确地进行交互和共享信息。
其工作的目标是保证软件按照用户期望的方式进行交互。
2软件兼容性测试的内容软件兼容性测试的主要内容：1.操作系统/平台的兼容性2.应用软件的兼容性，例如framework、flash等3.浏览器之前的兼容性4.数据库之间的兼容性5.其他方面，例如操作系统语言、传输协议、代理服务器、防火墙、自身产品集成2.1操作系统/平台的兼容性市场上有很多不同的操作系统类型，最常见的有Windows、Unix、Macintosh、Linux等。
ie8换回ie6的最简单办法
IE8换回IE6的最简单办法
1.IE8不管在安全性还是兼容性方面，都比IE6强，IE7是过渡产品，我们不推荐使用。
2.迅雷7是基于IE8内核做了一些调整，对于使用迅雷7的用户来说，IE8配迅雷7兼容更好，更稳定不易出错
所以如果没什么必要，请大家还是不要换回IE6.
当然如果你已经习惯了使用IE6，方法自然是有的，而且很简单，按我下面说的方法一分钟内就搞定！
开始－》运行－输入：C:\WINDOWS\ie8\spuninst\spuninst.exe，再回车确定！看下面的截图
弹出窗口选“是”就可以了
重启就自然换回到了IE6，并不需要重装IE6。
当然如果人懒不想手动输入的话，就复制这个吧: C:\WINDOWS\ie8\spuninst\spuninst.exe。
javaScript,页面自动加载事件详解
javaScript,页面自动加载事件详解 篇一：javascript 动态添加事件 往往我们需要在 JS 中动态添加事件，这就涉及到浏览器兼容性问题了，以下谈及的几 种方法，我们也常常混合使用。
方法一、setAttribute var obj = document.getElementById("obj"); obj.setAttribute("onclick", "javascript：alert('测试');"); 这里利用 setAttribute 指定 onclick 属性，简单，很好理解， 但是： IE 不支持， IE 并不是不支持 setAttribute 这个函数， 而是不支持用 setAttribute 设 置某些属性， 包括对象属性、 集合属性、 事件属性， 也就是说用 setAttribute 设置 style、 onclick、 onmouseover 这些属性在 IE 中是行不通的。
LEO:在 IE6 下尝试成功 方法二、用 attachEvent 和 addEventListener IE 支持 attachEvent obj.attachEvent("onclick", Foo); function Foo() { alert("测试"); } 也可写在一起 obj.attachEvent("onclick", function(){alert("测试");}); 其它浏览器支持 addEventListener obj.addEventListener("click", Foo, false); function Foo() { alert("测试"); } 同样也可写在一起 obj.addEventListener("click", function(){alert("测试");}, false); 注意 attachEvent 的事件带 on，如 onclick，而 addEventListener 不带 on，如 click。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<style>
#wrapper {
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[url]/TR/html4/loose.dtd[/url]">
二、万能 float 闭合
关于 clear、float 的原理可参见 [How To Clear Floats Without Structural Markup]。
1.高度的区别 IE:在没有定义高度时候，将根据内容高度的变化，包括未定义高度的图片内容； 在定义了高度时候，当内容超过高度时，将使用实际内容的高度。 FF:在没有定义高度时，如果内容中包括了图片内容，MF的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况； 在当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。 建议：在可以确定内容高度的情况下最好定义高度，如果真的没有办法定义高度，尽量不用使用边框样式。 2.宽度的区别 IE:内容宽度=您定义的容器宽度(Internet Explorer ’width’)-padding宽度-border宽度。 IE中定义 width:100px;padding:5px 的话，所显示的宽度就是100px。 FF:容器占的宽度=内容宽度+padding宽度+border宽度。 Firefox中定义 width:100px;padding:5px 的话，所显示的宽度就是105px。 建议：使用 !important；但是，!important一定要在前面。 如：width:95px !important;width:100px;padding:5px;。 注：高度亦是如此！ 3.浮动（float）的区别 （1）空格处理 IE:对于DIV并排时候使用float关键字时候，IE对块与块之间的空格是处理的。 FF:对于DIV并排时候使用float关键字时候，Firefox对块与块之间的空格是不处理的。 建议：经常发现使用float关键字时候在Firefox显示正常，但是在IE中会出现空格，就是这个原因； 避免在div连div时候添加空格或者回车，也即是一个div紧接这一个div写； 或者，将div放入li中进行处理，这样就不会有空格的问题。 （2）Margin加倍 IE:在使用float的情况下，IE的margin加倍。 FF:正常显示。 建议：针对IE，添加display:inline; 相应的css为 #float{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ } 4.鼠标位置处理 IE:获取事件鼠标位置时，IE用的是event.x和event.y，并且值在不加单位的情况下可以直接使用,IE提供默认单位； div.style.left = event.x div.style.top = event.y 此时，div显示的位置为鼠标的位置。 FF:获取事件鼠标位置时，Firefox用的是MouseEvent.pageX和MouseEvent.pageY，并且在不加单位的情况下直接赋值后，无效；必须添加单位。 div.style.left = MouseEvent.pageX div.style.top = MouseEvent.pageY 此时，div显示的位置为0，0. 建议：都添加单位,无论针对IE或者Firefox都有效。 IE：div.style.left = event.x+'px' div.style.top = event.y+'px' FF：div.style.left = MouseEvent.pageX+'px' div.style.top = MouseEvent.pageY+'px' 针对IE与Firefox这些不同，解决方案可以有多种，但是当问题直接解析模型的不同的时候，我们只能分别针对浏览器的不同而单独写针对于浏览器的方法。这也是写精致CSS所必须懂得的。
4、改变父对象的属性
如果父对象的宽、高固定，图片大小随父对象而定，那么可以设置：
overflow:hidden;
来解决。如本例中可以向#sub中添加以下代码：
width:88px;height:31px;overflow:hidden;
5、设置图片的浮动属性
即在本例中增加一行CSS代码：
6、作为外部 wrapper 的 div 不要定死高度，最好还加上 overflow:hidden; 以达到高度自适应。
1、将图片转换为块级对象
即，设置img为：
display:block;
在本例中添加一组CSS代码：
#sub img {display:block;}
把div和img标签写在一行也可以，不要另用CSS处理。
2、设置图片的垂直对齐方式
即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。如本例中增加一组CSS代码：
将以下代码加入 Global CSS 中，给需要闭合的 div 加上 class="clearfix" 即可，屡试不爽。
<style>
/* Clear Fix */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
#sub img {vertical-align:top;}
3、设置父对象的文字大小为0px
即，在#sub中添加一行：
font-size:0;
可以解决问题。但这也引发了新的问题，在父对象中的文字都无法显示。就算文字部分被子对象括起来，设置子对象文字大小依然可以显示，但在CSS效验的时候会提示文字过小的错误。
但愿每次回忆，对糊口都不感到负疚 ——郭小川
IE6里，不管怎么加边框的粗细(加4像素也只显示1像素边框)，都只显示1像素边框，颜色加深了点。
IE7、IE8、Firefox正常。
===第四个问题
一、CSS HACK
以下两种方法几乎能解决现今所有 HACK。
1、!important
css:
a img { border:1px solid #B0CCE2; width:236px; height:54px;}
a:hover img { border:2px solid #5384BE;width:234px; height:52px;}
：给链接加边框，页面载入时1像素边框，鼠标放上去2像素边框。
2) 水平居中：margin:0 auto;（当然不是万能）
3、若需给 a 标签内内容加上样式，需要设置 display:block;（常见于导航标签）
4、FF 和 IE 对 BOX 理解的差异导致相差 2px 的、还有设为 float 的 div，在 ie 下 margin 加倍等问题。
5、ul 标签在 FF 下面默认有 list-style 和 padding 。最好事先声明，以避免不必要的麻烦。（常见于导航标签和内容列表）
</style>
三、其他兼容技巧
1、FF 下给 div 设置 padding 后会导致 width 和 height 增加，但 IE 不会。（可用 !important 解决）
2、居中问题
1) 垂直居中：将 line-height 设置为当前 div 相同的高度，再通过 vertical-align:middle;（注意内容不要换行）
====第三个问题：
据我所知。DIV在应用CSS样式的时候没出现过什么不兼容的情况！{（本人自己的经历）}
只出现过div+css的浏览器兼容问题：
例:
水平居中---Firefox使用margin-left: auto; margin-right: auto; IE6 使用text-align: center;
现在常用了第一种，很好用，写出来与大家分享；
#pages{margin;auto;width;910px;text-align;left;}
#pages{*width;915px;!important;}Ie7
问题二：IE6、Firefox下img图片元素下多余空白解决方法
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed，注意顺序 */
}
</style>
注意：*+html 对 IE7 的 HACK 必须保证 HTML 顶部有如下声明：
解决办法：
在进行页面的DIV+CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”，根据原因的不同要用不同的解决方法，这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳，供大家参考。
垂直居中---Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中，而