当前位置：文档之家 › IE5,IE6,IE7,IE8的css兼容性列表

IE5,IE6,IE7,IE8的css兼容性列表

  • 格式：docx
  • 大小：93.91 KB
  • 文档页数：15

下载文档原格式

  / 15

合集下载

【珍藏版】IE6,IE7,IE8,Firefox等浏览器兼容的css hack

【珍藏版】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这样维护起来成本比较低，改动不会影响其他的浏览器，而一旦有浏览器淘汰，只要搜索关键字，就可以批量去掉这些代码。

IE6,IE7,IE8,Firefox,Chrome,Safari的CSS hack兼容表

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.谷哥.火狐各浏览器网页兼容性介绍总结

史上最全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>后面，多余的字也同样消失，页面正常显示。

IE6兼容性大全

IE6兼容性大全

IE6兼容性大全相信从事前端开发的朋友对IE6都是深恶痛绝，恨不得先杀后J，然后再大卸八块以解心头只恨。

虽然是这么可恶的一个浏览器，但是IE6迄今为止的市场占有率仍然很高，截止2009年8月份的市场占有率仍然有25%之多。

那么今天创意灵犀通过翻译国外的译文对IE6的兼容问题进行总结概括。

难免有疏漏之处，如若您有更好的建议，欢迎在回复中提出，我会及时加以补充。

1.前言：考虑浏览器的兼容性，我们要做的首先一定要简洁，如果你的布局太复杂，兼容性就更加难以做到。

其次，我们要实用合适的文档声明，因为没有声明的情况下，IE6会出现很多怪异的问题。

W3CSCHOOL指出，XHTML1.0中文档声明包括以下三种：Frameset(框架型)、Transitional(过渡型)、Strict(严格型) 。

而loose为HTML4.01的类型，并非 XHTML的类型。

我们最常用的通常是过渡型，示例代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">第三，当我们完成制作的时候要记得验证我们的代码，有些人认为校验代码没有任何实用价值，但我不这么认为。

校验仅仅只需花费一点点时间，而且将受益于所有浏览器而非仅仅IE6；验证确保了向后兼容并且易于维护。

至少也得验证XHTML！第四，实用渐进增强，即在适当的时候保留一些不兼容浏览器的基本功能，至少不影响用户体验到网站要表现的内容。

最后是如何测试我们的网站，在FF下我们可以使用功能强大的Firebug，可以方便的对网站的CSS及网站结构进行精确快速的运行时查看，甚至对JS设置断点。

而IE下我们的工具相对较为贫乏，但是我们可以使用IETester来测试不同IE版本的显示效果，IETester的开发者也提供了DebugBar这款IE插件免费供个人使用，但商业用户只可试用60天。

IE8兼容解决方案

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各浏览器兼容问题整理

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等)。

ie6、7、8、火狐浏览器兼容性

ie6、7、8、火狐浏览器兼容性

解决IE7、IE8样式不兼容问题
方法:要在页面中加入如下HTTP meta-tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
只要IE8一读到这个标签，它就会自动启动IE7兼容模式，保证页面完整展示。
注：
IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
另外再补充一个，下划线"_",
IE6支持下划线，IE7和firefox均不支持下划线。
由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想Байду номын сангаас的页面效果。
IE6 IE7 FF
_ √ × ×
* √ √ ×
!important × √ √
----------------------------------------
注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。
<meta http-equiv="x-ua-compatible" content="ie=7" />

CSS兼容性问题总结及解决方法

CSS兼容性问题总结及解决方法

CSS兼容性问题总结及解决⽅法css兼容问题兼容问题1.⽂字本⾝的⼤⼩不兼容。

同样是font-size:14px的宋体⽂字，在不同浏览器下占的空间是不⼀样的，ie下实际占⾼16px，下留⽩3px，ff下实际占⾼17px，上留⽩1px，下留⽩3px。

解决⽅案：给⽂字设定 line-height 。

确保所有⽂字都有默认的 line-height 值。

2.ff下容器⾼度限定.即容器定义了height之后，容器边框的外形就确定了，不会被内容撑⼤，⽽ie下是会被内容撑⼤，⾼度限定失效。

所以不要轻易给容器定义height。

3. 横向上的内容撑破容器问题。

如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折⾏。

故，内容可能撑破的浮动容器需要定义width。

4.浮动的清除，ff下必须清除浮动clear:both。

5. double-margin bug。

ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。

解决⽅案，给浮动容器定义display:inline。

6.margin bug.当外层元素内有float元素时，外层元素如定义margin-top:14px，将⾃动⽣成margin-bottom:14px。

padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这⼀种出现条件。

解决⽅案：外层元素设定border 或设定float。

7.吞吃现象.还是ie6，上下两个div，上⾯的div设置背景，却发现下⾯没有设置背景的div 也有了背景，这就是吞吃现象。

对应上⾯的背景吞吃现象，还有滚动下边框缺失的现象。

解决⽅案：使⽤zoom:1。

8.注释也能产⽣bug~~~“多出来的⼀只猪。

”这是前⼈总结这个bug使⽤的⽂案，ie6的这个bug 下，⼤家会在页⾯看到猪字出现两遍，重复的内容量因注释的多少⽽变。

解决⽅案：⽤“<!–[if !IE]> picRotate start <![endif]–>”⽅法写注释。

css中一些兼容性问题和技巧

css中一些兼容性问题和技巧

一、设置float：left时父元素height不能自适应的兼容问题代码：<style type="text/css">#box{ width:800px; border:5px #333333 solid;}#left{ width:360px; background:#FF0000;height:250px; float:left;} #right{float:left; width:360px; background:#0000FF;height:250px;} </style><body><div id="box"><div id="left"></div><div id="right"></div></div></body>（1）在IE6和IE7中显示如下：（2）在IE8和IE9 中显示如下：(3)在firefox和opera中显示如下：解决办法：在父元素中添加overflow：hidden代码如下：<style type="text/css">#box{ width:800px; border:5px #333333 solid;overflow;hidden}#left{ width:360px; background:#FF0000;height:250px; float:left;}#right{float:left; width:360px; background:#0000FF;height:250px;}</style>修改后：IE、firefox、opera 中显示如下：二、当同时设置float：left和margin时IE6会产生双倍margin值代码如下：<style type="text/css">#box{ width:800px; border:5px #333333 solid; overflow:hidden}#left{ width:360px; background:#FF0000;height:250px; float:left; margin:0px 20px;} #right{float:left; width:360px; background:#0000FF;height:250px; margin:0px 20px;} </style></head><body><div id="box"><div id="left"></div><div id="right"></div></div></body>在IE6中显示如下：在IE7、IE8、IE9、firefox、opera中显示如图：解决方法：添加display：inline修改后：IE、firefox、opera 中显示如下：三、margin不能撑开height代码如下：<style type="text/css">#box {background-color:#eee; width:300px; }#inbox{margin-top: 20px;margin-bottom: 20px; text-align:center }</style><body><div id="box"><div id="inbox">对象中的内容</div></div></body>（1）IE6和IE7能够撑开，如图：（2）IE8 、IE9、firefox、和opera不能撑开。

CSS过滤器兼容ie，火狐和谷歌

CSS过滤器兼容ie，火狐和谷歌

CSS过滤器兼容ie，⽕狐和⾕歌这篇汇总主要是提供⼀些CSS不透明的详细介绍，代码⽰例和解释，以实现这项有⽤的CSS技术在您的项⽬中兼容所有浏览器。

关于CSS 透明度，有⼀点需要注意的是，它虽然使⽤了很多年，但它⼀直以来都不是⼀个标准属性。

它是⼀种⾮标准技术，应该是CSS3规范的⼀部分。

1. 旧的Opacity设置 以下代码是Firefox和Safari旧版本所需的透明度设置:#myElement { -khtml-opacity: .5; -moz-opacity: 0.5; } -khtml-opacity设置是针对旧版本的Webkit渲染引擎，这种专⽤属性现在已经过时了，除⾮你还有需要兼容Safari 1.x.的⽤户。

第⼆⾏使⽤专⽤属性 -moz-opacity是为了兼容Mozilla渲染引擎的早期版本，以及追溯到Netscape Navigator。

Firefox 0.9以后就不要求使⽤-moz-opacity属性，Firefox 3.5（现在使⽤Gecko引擎）已经不在⽀持这个属性。

2. 在Firefox, Safari, Chrome和Opera下的CSS透明度 以下代码是除了IE外的所有当前浏览器的最简单，最最新的不透明度设置的CSS语法：#myElement { opacity: .7; } 上述语法将设置⼀个元素为70％不透明（或30%透明）。

设置opacity:1将使元素不透明，⽽设置opacity:0将使得元素完全不可见。

你只要记住“opacity”等同于“不透明”就很容易记住了，opacity值越⼩就越接近透明。

opacity属性可以精确地⼩数点后两位，所以值取“.01”和“.02”实际上是不同的，虽然可见度很难被发觉。

⼀般情况下，精确到⼀位就可以了，取值如“.3”或“.7”。

3. IE下的CSS透明度 IE下照旧有别于其他浏览器，并且⽬前也有三个不同版本的IE在⼴泛使⽤，透明度设置是不同的，有时需要额外的CSS来控制：#myElement { filter: alpha(opacity=40); } 上⾯的CSS使⽤专⽤的filter属性来设置IE6-8透明度。

js代码判断浏览器版本支持ie6ie7ie8ie9

js代码判断浏览器版本支持ie6ie7ie8ie9

JS代码判断浏览器版本,支持IE6,IE7,IE8,IE9！JS代码判断浏览器版本,支持IE6,IE7,IE8,IE9！做网页有时候会用到JS检测IE的版本，下面是检测Microsoft Internet Explorer版本的三种代码！第一种：<script type="text/javascript">var browser=navigator.appNamevar b_version=navigator.appVersionvar version=b_version.split(";");var trim_Version=version[1].replace(/[ ]/g,"");if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE6.0"){alert("IE 6.0");}else if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE7.0"){alert("IE 7.0");}else if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE8.0"){alert("IE 8.0");}else if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE9.0"){alert("IE 9.0");}</script>第二种：<script type="text/javascript">if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE6.0"){alert("IE 6.0");}else if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE7.0"){alert("IE 7.0");}else if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE8.0"){alert("IE 8.0");}else if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE9.0"){alert("IE 9.0");}</script>第三种：<script type="text/javascript">if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/7./i)=="7.") {alert("IE 7.0");}else if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/8./i)=="8.") {alert("IE 8.0");}else if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/9./i)=="9.") {alert("IE 9.0");}else if(navigator.appName == "Microsoft Internet Explorer"){alert("IE 6.0");}。

最全整理浏览器兼容性问题与解决方案

最全整理浏览器兼容性问题与解决方案

常见浏览器兼容性问题与解决方案所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。

在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。

所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

在学习浏览器兼容性之前，我想把前端开发人员划分为两类：第一类是精确按照设计图开发的前端开发人员，可以说是精确到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实现，这就是一个必然会碰到的兼容性问题。

让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

如有雷同，不胜荣幸，若转载，请注明让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法最近做一个Web网站，之前一直觉得bootstrap非常好，这次使用了bootstrap3,在chrome,firefox,safari,opera，360浏览器（极速模式）、搜狗浏览器等浏览器下均没有问题，而在IE8及IE11下发现样式无法显示，然后各种百度啊，最后在雅朋网的一个网友帖子的帮助下解决了问题，也参考了千寻学习网的资料，先将解决方法总结如下：首先需要确保你的HTML页面开始部分要有DOCTYPE声明。

DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档，具体会影响：对标记attributes 、properties的约束规则对浏览器的渲染模式产生影响，不同的渲染模式会影响到浏览器对于CSS代码甚至JavaScript脚本的解析DOCTYPE是非常关键的，目前的最佳实践就是在HTML文档的首行键入：<!DOCTYPE html>大神的帖子总结的bootstrap的查找原因好几条，首先，Bootstrap3 是移动设备优先的原则开发的，所以原因可能如下：1.没有正确调用远程地址即只要是IE9以下，就调用两个专门的js<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!--[if lt IE 9]><script src="/libs/html5shiv/3.7/html5shiv.min.js "></script><script src="/libs/respond.js/1.4.2/respond.min.j s"></script><![endif]-->但是我测试发现仅仅使用以上js文件不可行，2.调用方法不正确不要用file://或@import形式引用respond.min.js或respond.js或css文件3.针对浏览器的内容做标识（使用meta标签调节浏览器的渲染方式）bootstrap不支持IE兼容模式，为了让IE浏览器运行最新的渲染模式，将添加以下标签在页面中<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />IE=edge表示强制使用IE最新内核，chrome=1表示如果安装了针对IE6/7/8等版本的浏览器插件Google Chrome Frame（可以让用户的浏览器外观依然是IE的菜单和界面，但用户在浏览网页时，实际上使用的是Chrome浏览器内核），那么就用Chrome内核来渲染。

浏览器(IE6、IE7、IE8)配置手册

浏览器(IE6、IE7、IE8)配置手册

1Windows 2000或XP（IE6）1.1 步骤一启动浏览器。

方式一：在Windows的桌面上，双击鼠标Internet Explorer图标，如图：方式二：在从任务拦上<开始>－<程序>中，单击鼠标Internet Explorer浏览器的程序，如图所示。

1.2 步骤二在IE浏览器上方的菜单中，选择<工具>－<Internet选项>，如下图所示：1.3 步骤三在打开的选项对话框中，选择<安全> 标签，并且点击“受信任的站点”或“可信站点”图标，如下图所示：1.4 步骤四点击按钮，则如下图所示：首先查看“对该区域中的所有站点要求服务器验证(https:)(S)”选项，如果被选中，则应去掉“√”。

请在“将该网站添加到区域中”，填写网上办公系统地址，例如“* ”，然后点击‘添加’按钮，再按‘确定’即可。

1.5 步骤五在步骤三所示图中，点击按钮，出现如下图所示对话框。

在对话框中，将“ActiveX 控件和插件”中的全部选项设置为‘启用’，并将相关安全级的选项确认设置为‘安全级-低’， 然后点击“确定”按钮回到“Internet 选项”对话框。

另外特别注意其中“其他”项中“通过域访问数据资源”，如果是“禁用”需要修改为“启用”：1.6 步骤六选择<常规> 标签，并且点击“设置”按钮，如下图所示：在弹出的对话框中，将“检查所存网页的较新版本”设置为“每次访问此页时检查”，然后按“确定”。

点击“确定”按钮关闭“Internet选项”对话框。

1.7 步骤七回到IE浏览器窗口后，在IE浏览器上方的菜单中，选择<查看>－<文字大小>－<中(M)>。

1.8 步骤八(winXP的防火墙设置)如果使用Windows XP SP2操作系统，需要按照以下步骤进行设置：1.8.1关闭“Windows 防火墙”：打开控制面板，双击图标“Windows防火墙”，出现“Windows防火墙”配置窗口，选中：“关闭（不推荐）”，如图：控制面板-Windows 防火墙1.8.2修改IE选项：在IE浏览器上方的菜单中，选择<工具>－<Internet选项>，如下图所示：在打开的选项对话框中，选择<高级> 标签，选中其中的“允许运行或安装软件，即使签名无效”，如下图所示：选中“允许运行或安装软件，即使签名无效”选项1.8.3关闭“弹出窗口阻止程序”：在IE浏览器上方的菜单中，选择<工具>－<弹出窗口阻止程序>，选中“关闭弹出窗口阻止程序”。

浏览器(IE6、IE7、IE8)配置手册

浏览器(IE6、IE7、IE8)配置手册

1 Windows 2000或XP（IE6）1.1步骤一启动浏览器。

方式一：在Windows的桌面上，双击鼠标Internet Explorer图标，如图：方式二：在从任务拦上<开始>－<程序>中，单击鼠标Internet Explorer浏览器的程序，如图所示。

1.2步骤二在IE浏览器上方的菜单中，选择<工具>－<Internet选项>，如下图所示：1.3步骤三在打开的选项对话框中，选择<安全> 标签，并且点击“受信任的站点”或“可信站点”图标，如下图所示：1.4步骤四点击按钮，则如下图所示：*首先查看“对该区域中的所有站点要求服务器验证(https:)(S)”选项，如果被选中，则应去掉“√”。

请在“将该网站添加到区域中”，填写网上办公系统地址，例如“* ”，然后点击‘添加’按钮，再按‘确定’即可。

1.5步骤五在步骤三所示图中，点击按钮，出现如下图所示对话框。

在对话框中，将“ActiveX控件和插件”中的全部选项设置为‘启用’，并将相关安全级的选项确认设置为‘安全级-低’，然后点击“确定”按钮回到“Internet 选项”对话框。

另外特别注意其中“其他”项中“通过域访问数据资源”，如果是“禁用”需要修改为“启用”：1.6步骤六选择<常规> 标签，并且点击“设置”按钮，如下图所示：在弹出的对话框中，将“检查所存网页的较新版本”设置为“每次访问此页时检查”，然后按“确定”。

点击“确定”按钮关闭“Internet选项”对话框。

1.7步骤七回到IE浏览器窗口后，在IE浏览器上方的菜单中，选择<查看>－<文字大小>－<中(M)>。

1.8步骤八(winXP的防火墙设置)如果使用Windows XP SP2操作系统，需要按照以下步骤进行设置：1.8.1关闭“Windows 防火墙”：打开控制面板，双击图标“Windows防火墙”，出现“Windows防火墙”配置窗口，选中：“关闭（不推荐）”，如图：控制面板-Windows 防火墙1.8.2修改IE选项：在IE浏览器上方的菜单中，选择<工具>－<Internet选项>，如下图所示：在打开的选项对话框中，选择<高级> 标签，选中其中的“允许运行或安装软件，即使签名无效”，如下图所示：选中“允许运行或安装软件，即使签名无效”选项1.8.3关闭“弹出窗口阻止程序”：在IE浏览器上方的菜单中，选择<工具>－<弹出窗口阻止程序>，选中“关闭弹出窗口阻止程序”。

CSS hack用法大全(举例详解)

CSS hack用法大全(举例详解)
IE8和Firefox、Opera、Safari选择第一个，即：background-color:#FF0000 !important;（IE8完全感冒于important，同时丢弃了对*的感情）
另外再补充一个，下划线"_",
IE6支持下划线，IE7、IE8和Firefox、Opera、Safari均不支持下划线。
3.区别IE6、IE7、Firefox (EXP 1)
【区别符号】：「*」、「_」
【示例】：
#divcss5{
background:blue; /*Firefox背景变蓝色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
</head>
<body>
你正在使用：
<!--[if IE 7]>
<h2>IE7</h2>
<![endif]-->
<!--[if IE 6]>
<h2>IE6</h2>
<![endif]-->
<!--[if IE 8]>
<h2>IE8</h2>
<![endif]-->
<br><br>
【区别符号】：「*」、「!important」
【示例】：
#divcss5{
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/

常见的兼容性问题

常见的兼容性问题

常见的兼容性问题常见的兼容性问题浏览器有着⼤量不同的版本，不同种类的浏览器的内核也不尽相同，所以不同浏览器对代码的解析会存在差异，这就导致对页⾯渲染效果不统⼀的问题。

初始化样式因浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，如果不初始化会造成不同浏览器之间的显⽰差异，布局出现错乱，所以要初始化样式，达到统⼀的布局。

最粗暴的⽅案就是使⽤*初始化样式，但是其会对于所有的标签加载样式以及计算样式优先级，可能会对性能有所影响。

通常使⽤Normalize.css 抹平默认样式差异，当然也可以根据样式定制⾃⼰的reset.css 。

内核样式兼容在CSS3标准还未确定时，部分浏览器已经根据最初草案实现了部分功能，为了与之后确定下来的标准进⾏兼容，所以每种浏览器使⽤了⾃⼰的私有前缀与标准进⾏区分，当标准确⽴后，各⼤浏览器将逐步⽀持不带前缀的CSS3新属性，⽬前已有很多私有前缀可以不写了，但为了兼容⽼版本的浏览器，可以仍沿⽤私有前缀和标准⽅法，逐渐过渡。

内核代表浏览器前缀Trident IE 浏览器-msGecko Firefox -mozPresto Opera-o Webkit Chrome 、Safari -webkit透明属性⽤来设定元素透明度的opacity 是CSS 3⾥的⼀个属性，现代浏览器都已经⽀持，对于⽼版本浏览器可以通过加⼊私有前缀来⽀持，对于IE6-IE8可以通过filter 属性来⽀持，IE4-IE9都可以通过滤镜写法提供兼容⽀持。

媒体查询对于IE9以下浏览器不⽀持CSS3媒体查询的问题，通常使⽤respond.js 来作为兼容性解决⽅案。

HTML5标签对于IE9以下浏览器不⽀持HTML5新标签的问题，可以使⽤document.createElement 创建元素并设置其CSS 样式即可，通常使⽤html5shiv.js 来作为兼容性解决⽅案。

placeholder 兼容性placeholder 是html5新增的⼀个属性，当input 或者textarea 设置了该属性后，该值的内容将作为灰字提⽰显⽰在⽂本框中，当⽂本框获得焦点或输⼊内容时，提⽰⽂字消失。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Yes
Yes
Yes
Yes
Lists
CSS 2.1:
IE 5.0
IE 5.5
IE 6.0
IE 7.0
IE8 Beta 1
IE8 Beta 2
IE 8.0
{list-style:sStyle}
list-style
Yes
Yes
Yes
Yes
Yes
Yes
Yes
{list-style-image:sStyle}
:target
No
No
No
No
No
No
No
:not(X){sRules}
:not()
No
No
No
No
No
No
No
:enabled{sRules}
:enabled
No
No
No
No
No
No
No
:disabled{sRules}
:disabled
No
No
No
No
No
No
No
:checked{sRules}
:focus{sRules}
:focus
No
No
No
No
Yes
Yes
Yes
:hover{sRules}
:hover
Partial
Partial
Partial
Yes
Yes
Yes
Yes
:lang(C){sRules}
:lang()
No
No
No
No
Yes
Yes
Yes
:link{sRules}
:link
Yes
Partial
Yes
Yes
Yes
Color and Background
CSS 2.1:
IE 5.0
IE 5.5
IE 6.0
IE 7.0
IE8 Beta 1
IE8 Beta 2
IE 8.0
{color:sColor}
color
Yes
Yes
Yes
Yes
Yes
Yes
Yes
{background:sBackground}
:nth-child()
No
No
No
No
No
No
No
:nth-last-child(){sRules}
:nth-last-child()
No
No
No
No
No
No
No
:nth-of-type(){sRules}
:nth-of-type()
No
No
No
No
No
No
No
:nth-last-of-type(){sRules}
Descendant
Yes
Yes
Yes
Yes
Yes
Yes
Yes
CSS 3:
IE 5.0
IE 5.5
IE 6.0
IE 7.0
IE8 Beta 1
IE8 Beta 2
IE 8.0
E~F{sRules}
General Sibling (~)NoNoNoYes
Yes
Yes
Yes
Pseudo-classes
CSS 2.1:
IE 5.0
IE 5.5
IE 6.0
IE 7.0
IE8 Beta 1
IE8 Beta 2
IE 8.0
:active{sRules}
:active
No
No
No
Partial
Partial
Partial
Yes
:first-child{sRules}
:first-child
No
No
No
Yes
Yes
Yes
Yes
:optional{sRules}
:optional
No
No
No
No
No
No
No
:read-only{sRules}
:read-only
No
No
No
No
No
No
No
:read-write{sRules}
:read-write
No
No
No
No
No
No
No
Pseudo-elements
CSS 2.1:
IE 5.0
IE8 Beta 2
IE 8.0
[att=val]{sRules}
Equality [=]
No
No
No
Yes
Yes
Yes
Yes
[att]{sRules}
Existence []
No
No
No
Yes
Yes
Yes
Yes
[att|=val]{sRules}
Hyphen [|=]
No
No
No
Yes
Yes
Yes
No
No
No
No
No
No
No
:only-child{sRules}
:only-child
No
No
No
No
No
No
No
:only-of-type{sRules}
:only-of-type
No
No
No
No
No
No
No
:empty{sRules}
:empty
No
No
No
No
No
No
No
:target{sRules}
No
No
No
No
No
No
No
::after{sRules}
::after
No
No
No
No
No
No
No
::first-letter{sRules}
::first-letter
No
No
No
No
No
No
No
::first-line{sRules}
::first-line
No
No
No
No
No
No
No
::selection{sRules}
:nth-last-of-type()
No
No
No
No
No
No
No
:last-child{sRules}
:last-child
No
No
No
No
No
No
No
:first-of-type{sRules}
:first-of-type
No
No
No
No
No
No
No
:last-of-type{sRules}
:last-of-type
CSS 3:
IE 5.0
IE 5.5
IE 6.0
IE 7.0
IE8Beta 1
IE8Beta 2
IE 8.0
ns|E{sRules}
Namespaced
No
No
No
No
No
No
No
Attribute Selectors
CSS 2.1:
IE 5.0
IE 5.5
IE 6.0
IE 7.0
IE8 Beta 1
Partial
Partial
Yes
Yes
Yes
{background-repeat:sRepeat}
background-repeat
Yes
Yes
Yes
Yes
Yes
Yes
Yes
CSS 3:
IE5.0
IE5.5
IE6.0
IE7.0
IE8Beta 1
IE8Beta 2
IE8.0
{color-profile:sProfile}
Yes
[att^=val]{sRules}
Prefix [^=]
No
No
No
Yes
Yes
Yes
Yes
[att*=val]{sRules}
Substring [*=]
No
No
No
Yes
Yes
Yes
Yes
[att$=val]{sRules}
Suffix [$=]
No
No
No
Yes
Yes
Yes
Yes
Combinators
CSS 2.1:
IE 5.0
IE 5.5
IE 6.0
IE 7.0
IE8 Beta 1
IE8 Beta 2
IE 8.0
E+F{sRules}
Adjacent Sibling (+)
No
No
No
Yes
Yes
Yes
Yes
E>F{sRules}
Child (>)
No
No
No
Yes
Yes
Yes
Yes
EF{sRules}
IE 5.5
IE 6.0
IE 7.0
IE8 Beta 1
IE8 Beta 2
IE 8.0
:after{sRules}
:after