IE开发者中心给到了一份详细的针对前端开发者的文档，列出了IE10支持的HTML5和CSS3新特性。嗯，它终于跟上了：

CSS3

• css region
• css3多列
• Flexbox
• grid
• 定位浮动(positioned float)
• 3D变换(3D transfrom)
• 动画(animation)
• 渐变(gradient)
• text-shadow
• 去掉样式表限制——在IE9之前的版本中，每个页面最多只能加载31个样式表文件，@import也只能最多嵌套4层，IE10中去掉了这些限制。

HTML5

其它

嗯，新东西很多，看起来还是很给力的。

需要注意的是，IE10对CSS3新特性的支持，大部分还是需要-ms-前缀的。

Opera 11.10对HTML5和CSS3的支持，和前一篇文章中提到的基本一样，不再多说，值得注意的是，正式版增加了对HTML5 File Api的支持，详情请查看Opera官方的文档。

IE团队貌似也想发力了，IE9刚发布不久就搞下一个版本的IE了，是想让人看到一点点希望么？但是IE的作风是，从来不会让前端开发人员省心的。

IE10 pre中的新特性列表：

• 支持兼容模式(x-ua-compatible)
• 支持ECMAScript 5 strict模式
• 支持渐变，支持此背景，而且引入了-ms-linear-gradient和-ms-radial-gradient以及-ms-repeating-linear-gradient和-ms-repeating-radial-gradient等私有属性。
• 支持CSS3多列(multi-column)
• 支持CSS3 Flexbox，悲催的，又是私有的display:-ms-box，以及-ms-box-xxx属性
• 支持CSS3 格栅(grid)，嗯，还是私有的属性，display:-ms-grid，和-ms-grid-xxx属性
• 支持变换(transition)和3D变形 (transform)——官方网站木有找到，待确认

正如你担心的，IE10依然不支持CSS3 text-shadow，您还是安心的用滤镜吧，HTML5表单照旧没有在支持列表中！

总之，兼容模式是最恶心的啊，有木有！另外之前是谁说的IE9不支持高级CSS3属性是因为其它浏览器都是用私有前缀实现的啊？谁在叫嚣IE9提倡“统一标记”的啊？！！！

ps:我刚刚注意到，ie9第一个pre版本在09年11月就已经发布，一年多才发正式版！不知道ie10的开发速度会不会有所改进。

再赞Opera团队！

有人说IE9是微软的二次革命，我觉得这种说法一点都不过，从IE6开始，IE的更新就没有这么彻底过，完全支持DOM level 2，完全支持CSS2.1，界面更精简……当然，我们最关心的是，IE9对HTML5和CSS3的支持到底怎么样～～

在微软自家的ietestcenter网站中，我们看到了这个图表：

看到这个图我感到鸭梨很大啊，心里在想，IE9有这么牛x吗？认真看了说明之后才清楚，原来这里的测试项目只是微软提交给W3C的条目，并不是完整的内容，比如CSS3中，这里只包含了5项技术，而不是所有的CSS3内容——强烈的BS一下微软，差点上他的当了……

其实，想要了解一个浏览器对HTML5/CSS3的支持很简单，上篇文章中介绍的Modernizr就是一个非常好的工具，我这里偷个懒，直接用访问findmebyip，即可看到IE9beta对它们的支持：

IE9对CSS3新特性的支持：

可见，目前IE9beta对CSS3新特性的支持还是很弱的。

IE9对CSS3选择器的支持：

IE9终于比较完整的支持CSS选择器了！

IE9对HTML5新特性的支持：

IE9beta对HTML5新特性的支持也是不完整的，音视频的支持非常弱，尽管IE团队表示将支持WebM，目前来看，还没有实现啊（PS:在HTML5test.com网站的测试中显示，IE9beta支持H.264格式视频）。另外，对SVG的支持是微软对外宣传IE9的标杆之一，但是，IE9对SVG的支持到底有多好呢？大家去看一下王道吧！PS:IE6-IE8是不支持SVG的，以至于相关技术应用在IE下要采用微软自家的VML替代。

IE9对HTML5表单的支持：

IE9对HTML5表单的支持一直是我最关注的，如果最终IE正式版依然不支持HTML5表单，那么这绝对是个失败的浏览器。

其实，我们知道IE9进步很大，但是它的一些表现让我们不敢对它抱有太多的希望，比如硬件加速是个很棒的功能，它能让浏览器渲染的更快，但是即便没有采用硬件加速，chrome就已经这么快了。而我实在想不通为什么硬件加速非要DirectX 9+，而且必须是windows 7系统，相对于webkit的webGL加速，这样的策略没太多优势哦，除非微软能够将xp用户全部升级到Windows 7！

嗯，简单的做了点review，我希望IE能以一种更好的方式发布和更新，IE6-IE9四个版本共存的情况会让人疯掉的吧…

1. 最多只支持引入3层@import CSS文件；
2. 最多只支持@import 32个CSS文件(使用link引入与此相同，可以查看这个测试页面，第5个测试值得注意);
3. 使用Data URi的时候，最多支持32K的base64编码(仅IE8,IE6和IE7不支持Data URi)；
4. URL长度最大2048个字符；
5. 每个style标签或css文件的选择符个数不能超过4095(参考秦歌的这篇文章，很多地方以为IE对CSS文件大小限制是288KB，秦歌的这个测试否定了这种说法)；
6. 不能下载大于2GB的文件(貌似IE8解决了这个问题)；
7. 最多支持总共300个cookies；
8. 每个域名最多允许20-50个cookies(IE6允许20个，IE7在打补丁后可以使用50个)，(其它浏览器也大都有限制，比如Opera限制30个，Firefox限制50个，而safari/webkit没有限制);
9. 只能读取最多4096个字节的cookies，写入超过5118字节的cookies头会出错。

应该还有其它限制，欢迎补充。

其实我们天天在想到底哪一天IE6才会真正死去，但是从2001年发布以来，IE6一直统治着国内的浏览器市场，直到现在还占据着国内50%以上的浏览器市场份额。

但是我想，无论你是普通用户还是网站开发人员或者是国内的浏览器开发者，我们都应该采取一些措施，共同促进IE6的灭亡。

如果你是IE6的忠实用户，请尽快升级你的IE6

给你一个升级IE6的理由？好吧：

1. 你和你的公司正在受到安全威胁。这个没有更好的理由来反驳了吧？就连国际知名的大公司如Google、yahoo等都因为使用IE6而受到严重攻击，还有哪家公司的IE6不会受到攻击呢？
2. 世界上各国政府都在建议大家升级浏览器。在IE6的0day漏洞被曝光之后，德国、法国和澳大利亚等国政府纷纷号召国民放弃使用IE6；
3. 就连微软自己都建议你放弃IE6。微软安全研究与预防博客发文称，IE6受0day漏洞影响最为严重，IE8基本不受该漏洞影响。事实上，微软也不止一次号召用户升级浏览器。
4. 这不是IE6的最后一个严重安全漏洞。IE6从发布到现在不知道出现过多少严重的安全漏洞，而这次远不是终结，它还有至少144个漏洞！
5. 微软在2014年之后将不再对IE6提供支持。2014年很久远吗？或者你相信2012年就是世界末日？
6. IE6对web标准的支持缺乏。IE6的技术还是10年前的，互联网技术经过10年的发展已经能够发生了巨大的改变，网站前端技术在不断进步，更先进的CSS、HTML和Javascript等技术已经能给用户带来更好的体验——而IE6用户将无法体验这些先进的内容。比如，前端观察用到的一些CSS3特性将无法在IE6甚至是IE8中体验到。
7. 国内的一部分企业开始要求员工升级浏览器。比如腾讯公司，已经要求所有员工将IE6升级到IE7。
8. IE6太过时了，国外网友大部分都不再使用IE6了。统计显示，目前国外用户已经逐渐淘汰IE6了。IE8和Firefox是主流(via 人民网)。
9. 国外各大网站开始明确表示将不再支持IE6。比如 Google 将停止支持IE 6 用户必须至少升至IE 7。

(部分参考自：http://mashable.com/2010/01/18/5-more-reasons-why-ie6-must-die/)

如果这几个理由都不够，那么请看国外统计的坚持使用IE6的原因，当然这里有些调侃的意味，如果你正好是其中一种情况，请不要生气 :) ：

via

当然在国内，坚持使用IE6的用户可能还是因为另外两个原因：

1. 习惯了IE6的操作方式，不喜欢IE7和其它浏览器的tab式浏览。当然一个人的习惯是最重要的。tab的浏览器方式是谁发明的已经不可考了，不过Opera和Firefox纷纷使用，后来国内的maxthon浏览器也采用了那种方式，然后到06年IE7的时候，也采用了tab的方式。这说明tab是一种很好的浏览方式，高效、方便，不然广大网民早就开始反对这种方式了，而各大浏览器也不会坚持下去了。所以建议你尝试一下新技术，从你的习惯中走出来。
2. IE6比较快，IE7和IE8太慢了。IE7和IE8的确太慢了，不过新版的Firefox 3.6和Chrome一直是很快的哦。

前端开发人员可以争取放弃兼容IE6

如果你是一名光荣的前端开发人员，希望你能尽可能的做更多的事情来让IE6更快的死去：

1. 以身作则，自己放弃IE6。从前端观察和其它技术网站的访问统计上看，IE6的用户比例竟然还有30%以上，这让我很震惊。作为一名前端开发者，用IE6做自己的主浏览器，那么你做的网站应该也不会在IE7/8以及其它更先进的浏览器中做测试的吧？
2. 说服你的BOSS或客户，放弃兼容IE6。有必要为了让网站在IE6中和其它浏览器中表现一直而花掉2倍甚至是3倍的时间和精力吗？我认为对不同的浏览器，可以采取适当的区分——让网站在现代浏览器如Firefox 3.5+、Chrome/Safari和Opera中实现最佳的表现，而在IE中实现相对比较差的界面——当然在不影响布局和功能的情况下。
3. 号召你的朋友弃用IE6。号召你身边的朋友使用IE7/8或者Firefox、Chrome等浏览器。另外，很多人都有个人博客，可以在自己的博客上号召IE6用户升级他们的浏览器。你也可以参与到众多的促进IE6升级的在线项目中来，比如 webrebuild.org的IE６升级活动以及效果很不错的IE6 Update中。

浏览器厂商应该负更多的责任

想起的一句话：此地钱多人傻，速来！这当然只是笑话。

不过据说现在中国网民数量已经高达3.6亿！而且这个数字还在不断增长。这显然是一个巨大的市场。

所以最近各大公司纷纷涉足浏览器市场，各自都推出自有品牌的浏览器，在Maxthon、世界之窗、腾讯TT、绿色浏览器等混战多年的情况下又出现搜狐浏览器、新浪浏览器和360浏览器。但是它们无一不是以IE为内核的(maxthon和搜狐浏览器有IE和webkit双内核的版本)，没有自己的内核。所以各位网民，不要以为你用了所谓“安全”浏览器你的电脑就安全了，它的内核IE本身都是不安全的，这些外壳浏览器谈何安全——不过有些浏览器会添加一些可以避免你误操作的功能。

对国内的浏览器市场来说，我认为这种“战国纷争”的局面是很不错的，至少能够普及一点儿“浏览器”知识，提高网民对互联网和互联网安全的认识。

但是我认为国内的浏览器厂商应该负起更多的责任。

你们的浏览器产品确实有很多特色，也有很多很有用或者很酷的功能，比较重视中国人的使用习惯。但是当用户因为IE的漏洞而被攻击的时候，你们会承担责任吗？还是将责任推到微软那里？这似乎有些不公平哦～～

对IE来说，最安全的、功能最强、稳定性最好的应该就是IE8了，如果你们能够推动用户去升级他们的内核到最新版，肯定能降低你们要为安全承担的风险。另外，减少一个内核支持也会减少你们的开发和维护支出吧。

总结

让IE6退出历史舞台，不是一朝一夕的事情，用户的惰性让他不愿意主动去升级，微软的浏览器升级模式又那么古老（而Firefox的提示升级和Chrome的后台自动升级模式倒省去了不少麻烦）。所以我们只有靠自己的力量来推动IE6的灭亡了。

然而IE对高级CSS选择器特别是CSS3选择器的支持让我们一直不能将CSS选择器推广应用。不过，虽然我们无法左右浏览器的市场份额，却可以通过一些技术改善我们的工作。我们也可以使用其它的一些技术，让IE可以变相支持CSS3选择器。

一位来自英国的网页开发工程师Keith Clark开发了一个JavaScript方案来使IE支持CSS3选择器。该脚本支持从IE5到IE8的各个版本。

用法

你只需要下载Robert Nyman的DOMAssistant脚本和ie-css3.js并将它们在你的页面的head标签中导入，如下：

1
2
3
4

<head>
	<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
	<script type="text/javascript" src="ie-css3.js"></script>
</head>

支持的选择器

• :nth-child
• :nth-last-child
• :nth-of-type
• :nth-last-of-type
• :first-child
• :last-child
• :only-child
• :first-of-type
• :last-of-type
• :only-of-type
• :empty

ie-css3的一些限制

• 样式表必须通过<link>标签引入。页面级的样式表或者内联的样式表将无效。不过你可以在外部样式文件中使用@import 导入其它样式文件；
• 样式表文件必须和页面放在同一个域名下面；
• 使用file://路径的样式文件将由于浏览器的安全问题而不起作用；
• :not()选择器尚不支持；
• 该方法不是动态的，样式被应用之后再改变DOM，将会无效。

如何工作的?

ie-css3.js下载页面的每一个样式文件并解析它的CSS3伪选择器。如果一个选择器被找到，它就会被替换为同名的CSS class。比如： div:nth-child(2) 将会变成 div._iecss-nth-child-2 。然后，Robert Nyman的DOMAssistant用于寻找匹配元素CSS3选择器的DOM节点然后将相应的CSS类添加给它。

最终，元素的样式表会被新的版本替代，然后用CSS3选择器对相应元素添加对应的样式。

避免IE的CSS解释器

根据W3C的规定，一个浏览器应该无视它不认识的CSS规则。这就出现一个问题——我们需要利用样式表文件中的CSS3选择器，但是IE会将它们丢弃。

为了避免这个问题，每一个样式文件都会通过XMLHttpRequest下载。这允许该脚本绕开浏览器内置的CSS解释器并能够读取原始的CSS文件。

• 访问项目主页
• 下载ie-css3.js
• 下载DOMAssistant

替代方案

显然这个也并非完美的方案，对于Ajax网站来说，它基本上是不能用的，因为在生成的样式表被应用之后再改变DOM，就不会有效了。但是事实上我们可以自己来自定义一个ie-css3的。只是没有它这个这么智能。

使用 cssQuery

cssQuery是由业界大牛Dean Edwards开发的一个Javascript组件。它就是为CSS 选择器而生的。它可以支持几乎所有的CSS 选择器，包括CSS3选择器。当然它在实现的时候进行了分级，分别针对CSS1，CSS2和CSS3制作了一个独立的js包，以及一个标准包。支持所有A级浏览器。

简单的用法：

1
2
3

var tags = cssQuery("body > p");
var tags = cssQuery("[href]");
var tags = cssQuery("a[href='#']");

然后你就可以自己写一些js为相应的对象添加想用的样式了。

我建议对支持CSS高级选择器的浏览器使用原生的CSS选择器写法，然后通过cssQuery在IE中动态的为响应的元素添加一个样式名。

比如，我们可以这样写CSS：

a[herf='#'],a.empty{color:red}

这里的第一条CSS3选择器是用于Firefox/webkit等支持CSS3选择器的非IE浏览器的，a.empty是专门为IE而写。然后通过CSSQuery动态的在IE浏览器中为对应的元素添加样式：

1
2

var tags = cssQuery("a[href='#']");
tags.className="empty";

当然，上面的这段js最好使用IE的条件注释。

使用 jQuery

据说jQuery的选择器比cssQuery要快很多。当然，无可否认，jQuery的选择器是目前流行的js框架中最好用的一个。而使用jquery来实现类似上述功能要方便很多，因为jQuery的选择器更好用。

OK，jQuery的做法和cssQuery有些类似，CSS可以写成上面一样的，JS可以这样写：

$("a[href='#']").addClass("empty");

更具体的用法可以查看我之前写的一个小例子《使用jQuery创建个性化链接样式》

使用 DOMAssistant

DOMAssistant也是一个很不错的JS库，它提供了一些类似jQuery的功能，比如CSS 选择器、事件以及一些DOM操作。它的优点就是小巧，压缩后只有9KB，我想这就是Keith Clark选择DOMAssistant来作为ie-css3.js的基础框架的主要原因吧。jQuery越来越肥胖了，而且用于实现这个功能有些浪费了。而且DOMAssistant的用法和jQuery非常类似。

事实上，DOMAssistant的选择器和对DOM的CSS Class的操作与jQuery一模一样。

$("a[href='#']").addClass("empty");

欲了解更多，可查看DOMAssistant官方，以及下载官方中文PDF文档

总结

其实，无论是ie-css3.js本身，还是后来我们讨论的三种替代方法，都是一种方法，就是用js动态的添加class到页面元素中。不同是ie-css3自动化的完成了这些工作，而后面的三种方案要自己动手根据自己的项目写一些js来实现。我认为ie-css3最方便，基本不用怎么维护，但是它一刀切，效率比较低，而且灵活性差，不适合于ajax项目。而后面的这几种方案灵活性强，但是要做很多额外的工作，无论你是将IE专用样式独立到一个专用的css文件中还是像文中写的那样和CSS3选择器写到一起，都会大大的增加你的工作量和维护成本。

为IE，我们要额外付出很多。

有更好的想法或创意吗？欢迎与我们分享。

尽管只是一个早期版本，IE开发团队还是比较高调的宣布了IE9的一些改进，比如速度比之前的IE版本都更快些，缩小与FF和webkit之间的差距(也就是还是赶不上了？)，支持CSS3的一些新特性，比如圆角(border-radius)，不过现在还不清楚是原生支持还是使用私有属性-ms-border-radius。可喜的是，IE9已经可以支持大部分CSS 选择器了！IE开发团队展示了IE9在css3.info的一个CSS选择器的测试页面的测试结果，结果如下图显示：

测试结果显示，IE9支持43个选择器中的41个(另外两个中一个有bug，一个不支持)，在578项测试中通过了574项，这是IE浏览器历史上最大的进步……

虽然微软之前宣布将支持HTML5，但是此次IE开发团队并未给出一个明确的答案，据说，关于是否支持HTML5，他们还在讨论中……

另外在Windows 7中引入的direct2D和directWrite等GPU硬件加速技术，也将在IE9中使用。

好吧，事实上，从泄漏出的这些信息可以看出来，IE9相对于IE8，无论在速度还是性能，以及对网站标准的支持，都有很大很大的进步。但是我们或许可以预见：将来某个时候发布的微软的IE9浏览器，已经远远落后于现在的firefox和chrome/safari了！

但是无论如何，前端观察都会一直关注微软的动静，毕竟大蛋糕在人家手里——这是一个杯具……

欲了解更多信息，可查阅IE团队博客的介绍。

首先，从字面上来理解，dashed 和 dotted 都是指“虚线”，他们的不同在于：

dashed：来自 dash（破折号），由 dash 组成的虚线
dotted：来自 dot （点），由 dot 组成的虚线，也称点线

这里多说几句废话，其实参看下 demo，就能从视觉上获得更直观的感受了。
下面再说说相关的 bug 吧，当然了，这些 bug 再一次只是光荣地出现在了 IE 下，此处涉及到 IE6 和 IE7。本文来自前端观察，转载请以链接形式注明版权。

Bug1: 在 IE6 下，1px 宽的 dotted 表现的和 dashed 一样。当宽度大于 1px 时，表现正常。

Bug2:在 IE7 下，当 4 条边的宽度是 1px 和 其它任意数值共存时，1px 的 dotted 表现的和 dashed 一样。4 条边的宽度全为 1px，或者为其它不是 1px 的不同值时不会出现这个 bug。

Bug3:另外，IE6 下，1px 的 dotted 或者 1px 的 dashed 边框，在拖动页面时，有时候边框会连成实线，有时候会出现缺口。

要解决这些 bug，要么直接就不用 dotted 而直接用 dashed；要么用图片代替；要么用额外标签和代码来解决。本文来自前端观察，转载请以链接形式注明版权。

鉴于只有在边框宽度为 1px 时才会出现这些 bug，可以设置外包围标签的边框宽度为 2px，通过增加一个内标签，设置其为 1px 的内容背景色边框，再通过设置 margin-top/right/bottom/left: -1px; 来盖掉外包围标签的 1px 边框，从视觉上实现正常效果。很啰嗦，很讨厌，很无奈。

.b6 {
border: 2px dotted #000;
padding-top: 0;
}
.b6 .inner {
border: 1px solid #9c9c9c;
width: 100%;
height: 100%;
margin: -1px;
position: relative;
z-index: 100;
}

详情请参考 demo 本文来自前端观察，转载请以链接形式注明版权。

关于浏览器的最离奇的统计结果之一就是Internet Explorer 版本6，7和8共存。截至本文，Internet Explorer各个版本总共占据了大约65%的市场份额。在网站开发社区，这个数字要小很多，统计显示大概只有40%。

这些统计中比较有趣的部分是，IE6、IE7、IE8之间的数值很接近，这防止了单个Microsoft的浏览器占居统治地位——与过去的情况相反。根据这些令人遗憾的统计结果，在为客户开发网站的时候开发人员对所有当前使用的IE浏览器做全面的测试是必要的，而且这样在个人项目上也可以拉拢更多的用户。

多谢那些JavaScript库(框架)，跨浏览器的Javascript的测试已经像当前形势所允许的那样接近完美了。但在CSS开发中还不是这样，特别是关系到IE目前存在的三个版本。

本文尝试为希望了解CSS对IE6、IE7、IE8的支持的不同的开发者提供一份详细的、易用的参考。本参考包含以下情况的概述和兼容情况：

• 三个浏览器中的一个支持而另外两个不支持的条目
• 三个浏览器中的两个支持而另外一个不支持的条目

本文不讨论：

• 三个浏览器都不支持的条目
• 私有属性

因此，本文的中心是三个浏览器中的不同，而不是必要的支持缺陷。该列表被分为以下五个部分：

• 选择器与继承
• 伪类与伪元素
• 属性支持
• 其它各种技术
• 重要bug和不兼容问题

选择器与继承

子选择器

示例

body > p {
	color: #fff;
}

描述

子选择器选择一个特定父级元素的所有直接子级元素，在上面的例子中，body是父元素，p是子元素。

支持情况

Bugs

IE7中，如果在父级标签和子级标签之间有一个HTML注释，子选择器将不会工作。

链类

示例

.class1.class2.class3 {
	background: #fff;
}

描述

链类用于送一个HTML元素有多个class声明的情况，就像这样：

<div class="class1 class2 class3">
<p>Content here.</p>
</div>

支持情况

Bugs

IE6好像支持这种情况，因为它能匹配链中的最后一个class到使用该class的元素上，然而，它并不能限制一个使用链中所有class的元素。

属性选择器

示例

a[href] {
	color: #0f0;
}

描述

该选择器允许一个元素被定位只要它有指定的属性。在上面的例子中，所有的带有href属性的a标签都会被限定，而没有href属性的a标签不会被限定。

支持情况

临近兄弟选择器

示例

h1+p {
	color: #f00;
}

描述

该选择器定位临近到指定元素的兄弟标签。上面的例子将会限定p标签，但是他必须是h1标签的兄弟而且要直接尾随在h1标签的后面。比如：

<h1>heading</h1>
<p>Content here.</p>
<p>Content here.</p>

在上面的代码中，CSS样式将只对第一个p有效。因为它是h1的兄弟而且紧跟着h1。第二个p也是h1的一个兄弟，但是它没有紧跟着h1。

支持情况

Bugs

在IE7中，如果在兄弟之间有一个HTML注释，临近兄弟选择器将无效。

普通兄弟选择器

示例

h1~p {
	color: #f00;
}

描述

该选择器定位一个指定元素后面的所有兄弟元素。将此选择器应用到上面的那个例子，将会对两个p标签都有效。当然，如果有一个p元素出现在h1之前，那个p元素不会被匹配。

支持情况

伪类和伪元素

:hover后面的后代选择器

示例

a:hover span {
	color: #0f0;
}

描述

一个元素可以被:hover伪类后面的选择器定位，就像后代选择器一样。上面的例子，在鼠标悬停的时候，将会改变a元素内的span元素中的文字的颜色。

支持情况

链伪类

示例

a:first-child:hover {
	color: #0f0;
}

描述

伪类可以链起来以缩小元素选择。上面的例子会定位每一个父级元素下的第一个a标签，并将hover伪类P应用到它上。

支持情况

非锚点元素中的:hover

示例

div:hover {
	color: #f00;
}

描述

:hover伪类可以应用到任何元素的悬停状态，而不只是a标签。

支持情况

:first-child伪类

示例

div li:first-child {
	background: blue;
}

描述

改伪类定位每一个指定的元素的父级元素的第一个子元素。

支持情况

Bugs

IE7中，如果要定位的第一个子元素之前有HTML注释，first-child伪类将会无效。

:focus伪类

示例

a:focus {
	border: 1px solid red;
}

描述

该伪类定位有键盘焦点的所有元素。

支持情况

:before 和:after 伪类

示例

#box:before {
	content: "本段文字在盒子前面";
}
 
#box:after {
	content: "本段文字在盒子后面";
}

描述

这两个伪元素分别在指定元素的前面和后面添加生成的内容，结合content属性一起使用。

支持情况

属性支持

由position产生的实际大小

示例

#box {
	position: absolute;
	top: 0;
	right: 100px;
	left: 0;
	bottom: 200px;
	background: blue;
}

描述

定义top, right, bottom, 和left 值到绝对定位的元素上将给这个元素实际的大小(宽度和高度)，虽然并没有设定使宽度和高度值。

支持情况

Min-Height 与 Min-Width

示例

#box {
	min-height: 500px;
	min-width: 300px;
}

描述

这两个属性分别指定元素的宽和高的最小值，允许一个盒子可以比指定的最小值更大，但是不能更小。它们两个可以一起使用，也可以分开来用。

支持情况

Max-Height 和Max-Width

示例

#box {
	max-height: 500px;
	max-width: 300px;
}

描述

这两个属性分别指定元素的高和宽的最大值，允许一个盒子比这个指定的最大值小，但是不能更大。它们也可以同时使用或者单独使用。

支持情况

透明边框颜色

示例

#box {
	border: solid 1px transparent;
}

描述

一个透明的边框色允许一个边框和边框色可见(或者不透明)时占用一样的空间。

支持情况

固定位置元素

示例

#box {
	position: fixed;
}

描述

position属性的这个值允许一个元素绝对的相对于窗口定位。

支持情况

固定位置的背景图

示例

#box {
	background-image: url(images/bg.jpg);
	background-position: 0 0;
	background-attachment: fixed;
}

描述

background-attachment属性的值为fixed允许一个背景图片绝对地相对于窗口定位。

支持情况

Bugs

就像position:fixed一样，IE6同样不支持background-positon的fixed值 。然而，在IE6中只有在这个值用于根元素的时候才有效。

属性值“inherit”

示例

#box {
	display: inherit;
}

描述

将值inherit 应用到一个属性那个允许一个元素从它的包含元素继承计算的值。

支持情况

Bugs

IE6 和IE7 不支持inherit 值除了direction 和visibility 属性。

表格单元的边框空白

示例

table td {
	border-spacing: 3px;
}

描述

该属性设置相邻的表格单元的边框之间的空白。

支持情况

在表格中渲染空单元格

示例

table {
	empty-cells: show;
}

描述

该属性，只应用于元素的display属性被设置为 table-cell的元素，允许空单元格渲染他们的边框和背景。否则，它们将不可见。

支持情况

表格标题的水平位置

示例

table {
	caption-side: bottom;
}

描述

这个属性允许将一个表格的标题放到表格的底部——默认是头部。

支持情况

修剪区域

示例

#box {
	clip:rect(20px, 300px, 200px, 100px)
}

描述

该属性指定一个盒子的一个区域可见，剩下的部分修剪掉，或者不可见。

支持情况

Bugs

有趣的是，该如果不使用隔开各个值的逗号，IE6和IE7也可以用这个属性。(比如，使用空格隔开剪切的值。)

打印页面中的orphanes和widows

示例

p {
	orphans: 4;
}
 
p {
	widows: 4;
}

描述

orphans属性设定在打印页面底部显示的最少行数。而widows 属性用来设定打印页面头部至少显示的段落的行数。

支持情况

盒子内的页面分割

示例

#box {
	page-break-inside: avoid;
}

描述

该属性设定分页是否发生在一个指定元素内。

支持情况

Outline 属性

示例

#box {
	outline: solid 1px red;
}

描述

outline 是outline-style, outline-width, 和outline-color的缩写。该属性要优于border属性，因为它不会影响文档流，因而u更有助于调试布局问题。

支持情况

display属性的替代值

示例

#box {
	display: inline-block;
}

描述

display 属性通常设置为block, inline, 或none。替代值包括：

• inline-block
• inline-table
• list-item
• run-in
• table
• table-caption
• table-cell
• table-column
• table-column-group
• table-footer-group
• table-header-group
• table-row
• table-row-group

支持情况

处理可折叠空白

示例

p {
	white-space: pre-line;
}
 
div {
	white-space: pre-wrap;
}

描述

white-space属性的pre-line值设定将多个空白元素折叠为一个空白，同时允许明确的设置断行。white-space 属性的pre-wrap 值不会将多个空白折叠为一个，不过也允许明确的设置断行。

支持情况

其它各种技术

@import的媒体类型

示例

@import url("styles.css") screen;

描述

就像上面的例子那样，引入的样式表文件的媒体类型声明在文件地址的后面。在该例子中，媒体类型是”screen”。

支持情况

Bugs

尽管IE6 和IE7 支持 @import，它们在媒体类型被指定的时候会无效，甚至会引起正@import规则无效。

计数递增

示例

h2 {
	counter-increment: headers;
}
h2:before {
	content: counter(headers) ". ";
}

描述

该CSS 技术允许你自动增加出现在指定元素前面的编号，结合before伪元素一起使用。

推荐阅读： CSS content, counter-increment 和 counter-reset详解

支持情况

生成内容的引用字符

示例

q {
	quotes: "'" "'";
}
 
q:before {
	content: open-quote;
}
 
q:after {
	content: close-quote;
}

描述

指定用于生成内容的引用呼号，用于q标签。

支持情况

重要bug和不兼容性问题

下面是在上文中没有提到的IE6和IE7的众多bug。当然这个列表不包括在这三个浏览器中都不支持的条目。

IE6 Bugs

• 不支持用样式设置<abbr> 元素
• 不支持以连字符和下划线开头的class和ID名
• <select> 元素总是出现在堆叠最上面，而无视z-index值
• 如果锚点的伪类没有使用正确的顺序(:link, :visited, :hover)，:hover 伪类将无效
• 一个属性的!important 声明会被同一规则中同一属性的没有使用!important的第二个声明覆盖。
• height 表现类似于min-height
• width 表现类似于min-width
• 左右margin双倍
• 圆点边框(dotted)看起来像虚线边框(dashed)
• text-decoration的 line-through 值在文字上看起来比别的浏览器要高一些
• 有序列表如果有一个固定结构(haslayout为true，不能设置li的高度/宽度/zoom等激活haslayout的值)，序号就不会增加，而是保持为1
• 列表元素不支持list-style-type的所有可用的值
• 如果列表条目浮动，指定的list-style-image 将不会显示
• 不完全支持 @font-face
• 某些选择器会错误的匹配注释和文档声明
• 如果一个ID 选择器结合一个类选择器不匹配，同样的ID选择器结合不同的类选择器也将被当作不匹配。

IE7 Bugs

• 有序列表如果有一个固定结构(haslayout为true，不能设置li的高度/宽度/zoom等激活haslayout的值)，序号就不会增加，而是保持为1
• 列表元素不支持list-style-type的所有可用的值
• 如果列表条目浮动，指定的list-style-image 将不会显示
• 不完全支持 @font-face
• 某些选择器会错误的匹配注释和文档声明

一些在这里没有提到的IE bug只会在特定环境发生，而且没有指定到特定的CSS属性或值。查看下面的参考以了解更多问题：

更多资源

• Details of Changes in Internet Explorer 8
• CSS Compatibility for Internet Explorer (MSDN)
• CSS Improvements in Internet Explorer 8 (MSDN)
• Internet Explorer Exposed – CSS Bugs @ Position Is Everything
• SitePoint CSS Reference
• CSS Contents and Browser Compatibility
• 10个很有用但是IE浏览器不支持的CSS属性 英文原文

关于作者

Louis Lazaris 是一个居住在加拿大多伦多的自由职业者，网页开发者，在网站开发领域有9年的经验，在其博客Impressive Webs发布网页设计文章和教程。你可以follow Louis on Twitter 或者在这里联系到他。

前两天碰到了这个奇怪的问题：

绝对定位的元素，紧邻着两个浮动元素。Firefox 中一切正常，IE6 中绝对定位元素消失了。本文来自前端观察，转载请以链接形式注明出处。

解决方法：只要别让绝对定位元素紧邻浮动元素就可以了。比如可以在绝对定位元素后面加个空元素。当然，这个空元素是毫无意义的，但是，在 IE 面前，又能怎么样呢？

经过实验，我发现，只要浮动元素的宽度不填满父元素，绝对定位元素就能正常显示，一旦浮动元素的宽度填满父元素，绝对定位元素就会消失。而且，看来，父元素宽度是这种情况发生的临界点。本文来自前端观察，转载请以链接形式注明出处。

另外，这个 demo 里面也存在 IE6 的另一个经典 bug : 由注释产生的表现不同。(唉，bug 都成经典了，IE 无敌啊。— 糖伴西红柿)本文来自前端观察，转载请以链接形式注明出处。

请看上面的图中，上面那块，就是有注释的，下面那块是去掉注释的，可以明显的看到底部的白色空白高度是不同的。

具体效果可参见 demo。