下载文档原格式
如何解决同时使用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 6。
0 / IE 7.0 / firefox 2 / Opera 9等主流浏览器对CSS解析不近相同，导致设计的页面效果不一样，所以用什么方法可以有效解决不同浏览器不同页面效果的问题呢?广泛被使用的方法就是 CSS Hack，即使用特别的CSS定义显示网页在不同浏览器的设计风格，针对不同的浏览器去写不同的CSS，最大化兼容浏览器。
一般情况下，我都会兼顾IE 6。
0 / IE 7.0 / firefox 2。
0浏览器，下面是用的较频繁的CSS Hack技巧：用的最广莫过于！important了，它可以针对IE(IE 7。
0能正确理解！important)和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上！important，就可以针对其优先了。
所以为了兼顾IE 6。
0与火狐之间的差异,我都会使用！important。
1、仅IE7与IE5。
0可以识别＊+html select {…}当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。
2、仅IE7可以识别*+html select ｛…!important；｝当面临需要只针对IE7做样式的时候就可以采用这个HACK。
3、IE6及IE6以下识别* html select ｛…｝这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK.其它浏览器不识别。
4、html/*＊/ >body select {…}这句与上一句的作用相同。
5、仅IE6不识别，屏蔽IE6select { display /*屏蔽IE6＊/:none;}这里主要是通过CSS注释分开一个属性与值,注释在冒号前。
6、仅IE6与IE5不识别，屏蔽IE6与IE5select/**/ { display /＊IE6,IE5不识别＊/：none；}这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。
我们知道ie会在一段时间内仍然流行，但是我们仍然可以支持浏览器并且避免hacks和条件css吗？这里有十条使用有效的html和css代码修复可以兼容ie6常见的问题。
1、使用一个声明你必须经常在html网页头部放置一个声明，推荐使用严格的标准。
例如或者xhtml使用最后你需要是ie6进入兼容模式，这已经足够兼容的了。
2、使用position: relative设置一个标签position: relative可以解决很多问题，特别是曾经有过看不见的经历或者奇怪布局的框架。
明显的，你需要小心，绝对位置放置的子元素是否都参照找到新位置。
3、为浮动元素使用display:inline浮动元素会有一个著名的ie6双边距margin bug。
假如你设置了左边距5px但实际上得到了10px左边距。
display:inline可以解决这个问题，尽管它不是必需的，但是css仍然有效。
4、设置元素启动hasLayout大部分ie6（ie7）的渲染问题都可以通过起来元素的hasLayout属性来兼容。
这是ie内置的设定，确定一个内容块相对其它内容块是有界限和位置的。
当你需要设置一个行内元素例如一个连接变成块状元素或者是透明效果，设置hasLayout也是必须的。
5、修复重复字符的bug复杂的布局会触发一个bug：浮动对象的最后字符会出现在已经清除浮动的元素后面。
这里有几种解决的办法，部分是理想的，并且一些测试和出错是必须的。
a、确保浮动元素都使用：display:inline；b、最后一个浮动元素使用margin-right:-3px;c、在浮动对象最后一个元素后使用一个条件注释。
例如这里输入注释…<![endif]d、在容器内的最后使用一个div空标签（它也必须设置90%宽度甚至更小）6、使用a标签完成可点击和hover原理Ie6只支持a标签的css定义hover效果你可以使用它去控制javascript启动的widgets，使得他们仍然保持键盘操作。
为了不同浏览器的观看效果，我们当然没必要为每个浏览器的不同版本写一个样式，这里我们利用“IE条件注释”。
找了一些相关的CSS HACK后，总结的几个方法。
1. 区别FF和IE1-1首先，当然是!important大法，可以提升指定样式规则的应用优先权，如下面的例子：插入代码：div{background-color: red !important;background-color: blue;}因为!important声明在IE6中并不是绝对的，它会被之后的同名属性定义所替换。
也就是说在上面的例子中，IE6所应用的是最后一个背景色的值，即“blue”；而在FF中背景色的值为“red”。
1-2还有一种方法，就是IE浏览器可以识别“>”等一些符号，如“~”、“`”、“插入代码：div{background-color: red;>background-color: blue;}在FF中得到的是背景色红色，而在IE中得到的背景色是蓝色，根据样式重定义的规则，如果浏览器可以识别“>”，则应该得到的蓝色的背景，因此可以知道“>”只有IE可以识别。
这样，我们就可以把FF和IE的样式分离开。
下面就是解决IE自己的问题了。
2. 区别IE5.5和IE的其他版本看一个例子：插入代码：div{>background-color: black;>background-color /*IE5.5*/: green;}这个例子使用了“>”，只有IE可以识别，在IE6中得到了黑色的背景；而在IE5.5中得到的绿色的背景；在IE5中也得到了黑色的背景。
这就说明了第二句定义只有IE5.5能识别，这是个很早就公布的HACK，可以在网上找到相关的资料，要注意的就是在属性名之后是有一个空格的。
到此我们已经把FF、IE5.5、IE6分离出来了，那IE5呢？其实现在我们只要把IE5跟IE6分开就OK了。
从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名.CSS技巧1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。
缺点是要控制内容不要换行2. margin加倍的问题设置为float的div在ie下设置的margin会加倍。
这是一个ie6都存在的bug。
解决方案是在这个div里面加上 display:inline; 例如：<#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px; display:inline;}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 下面根本等于没有设置宽度和高度。
浏览器不兼容原因及解决办法浏览器的不兼容，大家肯定都是深恶痛绝的，往往我们只是去做修补，却忘了更重要的事情，那就是追溯根源，避免类似的不兼容再次出现。
在下不才，归纳几点html编码要素，望能指点各位：1.文字本身的大小不兼容。
同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。
解决方案：给文字设定line-height。
确保所有文字都有默认的line-height 值。
这点很重要，在高度上我们不能容忍1px 的差异。
2.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。
所以不要轻易给容器定义height。
3.还讨论内容撑破容器问题，横向上的。
如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。
故，内容可能撑破的浮动容器需要定义width。
小实验：有兴趣大家可以看看这段实验。
在不同浏览器下分别测试以下各项代码。
a.<di v style=”border:1px solid red;height:10px”></div>b.<div style=”border:1px solid red;width:10px”></div>c.<div style=”border:1px solid red;float:left”></div>d.<div style=”border:1px solid red;overflow:hidden”></div>上面的代码在不同浏览器中是不一样的，实验起源于对小height 值div 的运用，<div style=”height:10px;overflow:hidden”></div>，小height 值要配合overflow:hidden一起使用。
兼，是什么！你会想到是什么，作为一个跟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>后面，多余的字也同样消失，页面正常显示。
常见浏览器兼容性问题与解决方案所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。
在大多数情况下，我们的需，无论用户用什么浏览器来查看我们的或者登陆我们的系统，都应该是统一的显示效果。
所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。
在学习浏览器兼容性之前，我想把前端开发人员划分为两类：第一类是精确按照设计图开发的前端开发人员，可以说是精确到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 实现，这就是一个必然会碰到的兼容性问题。
IE显示脚本错误访问者所使用的浏览器不能完全支持页面里的脚本，形成“脚本错误”。
遇到“脚本错误”时一般会弹出一个非常难看的脚本运行错误警告窗口，而事实上，脚本错误并不会影响网站浏览，因此这一警告可谓多此一举。
要关闭警告则可以在浏览器的工具菜单选择Internet选项，然后单击高级属性页。
进入到浏览标签，并选中“禁止脚本调试”复选框，以后你就不会再收到这些警告了。
建议您尝试进行以下操作：1、清除一下IE浏览器的缓存,点IE上的工具——然后再选择最下面的Internet选项，再点Internet删除文件(记得勾上删除所有脱机内容)，确定后再重新打开IE浏览器试试,同时请确认您使用的是IE6.0及以上版本。
2、您的网页上清缓存,在网页上选择工具->Interner选项->删除Cookies和删除文件,然后再确定。
3、请您点击IE浏览器中的“工具”，选择“internet选项”，进入“安全”页面，点击“自定义级别”，将您的安全设置设为“低”。
4、清空一下IE浏览器的cookies文件，在IE浏览器中设置“禁止自动脚本更新”，并不要选择“禁止运行ActiveX控件”，然后再尝试操作。
也可以尝试重新注册下IE的组件，方法如下：IE提示脚本错误解决方法：1、点击“开始”菜单，打开“运行”。
第二、输入regsvr32 jscript.dll后选择“确定”。
出现提示后，点击确定。
第三、再次输入regsvr32 vbscript.dll选择“确定”。
再一次出现提示后，确定。
脚本script是使用一种特定的描述性语言，依据一定的格式编写的可执行文件，又称作宏或批处理文件。
脚本通常可以由应用程序临时调用并执行。
各类脚本目前被广泛地应用于网页设计中，因为脚本不仅可以减小网页的规模和提高网页浏览速度，而且可以丰富网页的表现，如动画、声音等。
如果在脚本中加入一些破坏计算机系统的命令，这样当用户浏览网页时，一旦调用这类脚本，便会使用户的系统受到攻击。
解决IE6、IE7、IE8、Firefox兼容的两种方案浏览器不兼容，你知道源头吗？凡事都要知其然，才能知其所以然，前端开发的朋友想毕都会碰到浏览器兼容的问题，今天在网上觅到此文，希望对大家有用。
浏览器的不兼容，大家肯定都是深恶痛绝的，往往我们只是去做修补，却忘了更重要的事情，那就是追溯根源，避免类似的不兼容再次出现。
在下不才，归纳几点html编码要素，望能指点各位：1.文字本身的大小不兼容。
同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。
解决方案：给文字设定line-height 。
确保所有文字都有默认的line-height 值。
这点很重要，在高度上我们不能容忍1px 的差异。
2.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。
所以不要轻易给容器定义height。
3.还讨论内容撑破容器问题，横向上的。
如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。
故，内容可能撑破的浮动容器需要定义width。
小实验：有兴趣大家可以看看这段实验。
在不同浏览器下分别测试以下各项代码。
a.<div style=”border:1px solid red;height:10px”></div>b.<div style=”border:1px solid red;width:10px”></div>c.<div style=”border:1px solid red;float:left”></div>d.<div style=”border:1px solid red;overflow:hidden”></div>上面的代码在不同浏览器中是不一样的，实验起源于对小height 值div 的运用，<divstyle=”height:10px;overflow:hidden”></div>，小height 值要配合overflow:hidden一起使用。
实验好玩而已，想说明的是，浏览器对容器的边界解释是大不相同的，容器内容的影响结果各不相同。
4.浮动的清除，ff下不清除浮动是不行的。
纠正大家一个误区，遇到不兼容就说ff烂是不对的，其实更多时候是ie的奇怪表现让我们无所适从。
以下列出ie6的种种劣迹。
5.最被痛恨的，double-margin bug。
ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。
解决方案，给浮动容器定义display:inline。
6.mirrormargin bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。
padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。
解决方案：外层元素设定border 或设定float。
引申：ff 和ie 下对容器的margin-bottom，padding-bottom的解释有时不一致，似乎与之相关。
7.吞吃现象，限于篇幅，我就不展开了。
还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。
对应上面的背景吞吃现象，还有滚动下边框缺失的现象。
解决方案：使用zoom:1。
这个zoom好象是专门为解决ie6 bug 而生的。
8.注释也能产生bug~~~“多出来的一只猪。
”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。
解决方案：用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。
9.<li/>里加float <div/>，这是一个典型的，棘手的兼容问题，希望引起大家正视，给li 不同的属性会有不同的解释效果，ff下的解释稍可理解，ie6下的解释会让你摸不着头脑，由于问题的复杂性，将另起一文专门讨论该问题。
在《ul使用心得》一文里有相关成果，却没给出问题解决的过程。
10.使用了“float:left;display:inline”的ul的奇怪表现。
可以看出这句css是针对ie6下的double margin bug 而加上的display:inline，这也是我的css体系里的重要一环，在《ul使用心得》一文中有相关阐述。
而这句css用在ul上会让你痛苦不堪。
点到为止，这里不能多说哈。
11.img下的留白，大家看这段代码有啥问题：<div><img src=”" mce_src=”" /></div>把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写<div><img src=”" mce_src=”" /></div>后面两个标签要紧挨着。
ie7下这个bug 依然存在。
解决方案：给img设定display:block。
12.失去line-height。
<div st yle=”line-height:20px”><img />文字</div>，很遗憾，在ie6下单行文字line-height 效果消失了。
，原因是<img />这个inline-block元素和inline元素写在一起了。
解决方案：让img 和文字都float起来。
引申：大家知道img 的align 有text-top，middle，absmiddle啊什么的，你可以尝试去调整img 和文字让他们在ie和ff下能一致，你会发现怎么调都不会让你满意。
索性让img 和文字都float起来，用margin 调整。
13.链接的hover状态。
a:hover img{width:300px} 我们想让鼠标hover时，链接里包含的图片宽度变化，可惜在ie6下无效，ie7、ff下有效。
14.非链接的hover状态。
div:hover{} 这样的样式ie6是不认的，在ie7、ff下才有效果。
15.block化的a链接，其内套absolute层，absolute层内放置img，ie下，鼠标点击img 不会有链接效果，ff、op下正常。
想不出来了，以后想到再加吧。
上面的诸多问题如果你掌握了其中奥妙，90%的不兼容问题不需要另起css hack的。
16.无法彻底清除的float。
如果让ul下的li具有了float属性，如何clear浮动的li呢？<ul><li class=”c”></li></ul> 或者<ul><li><div>class=”c”></div></li></ul> 或者<ul><li></li><div>class=”c”></div></ul> 或者<ul><li></li></ul><div>class=”c”></div> 或者上述的组合？这个问题，我无法给出解答。
下面有个例子与此相关<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN/TR/xhtml1/DTD/xhtml1-transitional.dtd><style type=text/css>.c{clear:both;overflow:hidden;+overflow:visible}.bd{border:1px solid red}ul.ex{list-style:none;}ul.ex li{float:left;border:1px solid green;}</style><ul class=ex><li>sfsdfsfdf</li><li>sfsdfsfdf</li></ul><div class=c></div><div class=bd style=margin-top:19px>sfsdfsfdf</div>请在ie下测试，仅仅将margin-top:19px 改为margin-top:20px 你发现什么了？要素：doctype必须有，ie6、ie7下margin-top:19px还好好的，margin-top:20px 就出问题了，无法解释。
大家还可以将clear 层换不同的位置测试。
解决方案：给ul 属性zoom:1 （给li 加zoom:1 没用）引申：clear层应该单独使用。
也许你为了节省代码把clear属性直接放到下面的一个内容层，这样有问题，不仅仅是ff和op下失去margin效果，ie下某些margin值也会失效<div style=”background:red;float:left;”>dd</div><div style=”clea r:both;margin-top:18px;background:green”>ff</div>17.ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。
解决方案：给overflow:hidden加position:relative或者position:absolute。
另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。
18.ie6下严重的bug，float元素如没定义宽度，内部如有div定义了height或zoom:1，这个div就会占满一整行，即使你给了宽度。
float元素如果作为布局用或复杂的容器，都要给个宽度的。
19.ie6下的bug，绝对定位的div下包含相对定位的div，如果给内层相对定位的div高度height具体值，内层相对层将具有100%的width值，外层绝对层将被撑大。
