CSS3在不同浏览器的体现注意支持CSS3的IE9与IE其他版本的区别

如果把IE5、6、7、8、9都加起来，说IE是最多人使用的浏览器，应该当之无愧，不过比较多人用不代表IE的浏览器显示是正确的，虽然多数正义一直 是网络上最常见的真理，但遇上了HTML5、CSS3、还有那个不知道会不会变成标准的WebM，这个多数暴力完全发挥不了效用。

IE6对CSS3的识别更差一些

IE9对CSS3的识别度差强人意

不久前，小姜曾写过一篇用小叮当测试各家浏览器CSS3支持的文章，那是日本的Pure CSS Design（纯CSS设计）的网页，由神人ShopDD制作。所谓的Pure（纯） CSS指的是不使用任何一张图片，纯粹用DIV背景色、切边、圆角、阴影等CSS语法来「画出」一个图形，因为整个页面都是用CSS来「画」的，所以当浏 览器对CSS的支持不佳，很容易就会让最后的成品变成一个神秘的外星图像。浏览器之家也曾介绍哆啦A梦(小叮当)Pure CSS网页就是一例，可以看到IE8的哆啦A梦简直是整形失败。

或许因为制作这样的东西，可以展现一定程度的CSS控制技术与知识，所以台湾这边也有能人YIJEN制作 “波提狮” （Pon De Lion）的纯CSS页面，这次还多使用了@font-face（外部文字定义）的技术，援引网络字型来让页面呈现的文字更美观，更加入了 keyframes Animate（主框架动态）的动画效果，让波提狮摇摇尾巴（仅支持使用 Webkit核心的Chrome & Safari），想要看看各种浏览器效果的读者可以到Live Demo网页一瞧究竟。

附相关网站：Pure CSS Design Shop DD 小叮当 Pure CSS页面 IE9支持的CSS3属性列表

浏览器之家CSS3测试地址：http://www.liulan7.net/labs/css3.html

我是丽贝卡·考克斯（Rebekah Cox）。我是Quora的第一名员工，是目前Quora的四个产品设计师中的一个。Quora是一个让你交流专业知识的地方，它覆盖了很多你感兴趣的主题。

设计很重要

现在是成为设计师的好时机，特别是在硅谷，人们非常支持设计，对设计也很感兴趣。因为作为一个明显的竞争优势，设计已经为自己赢得了一席之地。

Quora爱设计

在Quora，我们对设计充满热情。我们从一开始就非常重视设计。Quora的文化鼓励优秀的设计并培养优秀的设计师，这对我们来说非常重要。

然而，Quora似乎是互联网上设计最少的网站之一。它使用黑色、红色和大量文字。创建了设计元素如此之少的产品，我们怎么还能声称自己关心设计呢？

设计是什么?

要明白，人们对设计这个词的定义常常是非常直觉化的。有些人认为设计在于审美，有些人认为它意味着互动，有些人则认为它是指logo标志。

在Quora ，设计是指什么？

理解如何对于不同的人来说设计可以有很多不同的含义，意味着我最开始在Quora工作时，最重要的任务与Python或CSS或JavaScript没有半点关系；这个任务就是确立一个简单的定义：在Quora设计意味着什么？

设计就是关于产品的一套决定

我们对设计的定义是：设计就是关于产品的一套决定。它不是一个界面或一种审美观，它不是一个品牌或一种颜色。设计是真正决定。

好处

这个定义包含了很多内容，它在很多方面塑造了我们的方法。用这种方法思考带来了很大的好处：

明确了产品及其界面之间的关系

首先，它明确了产品及其界面之间的关系。你的产品的最终样子不是突然出现的大结局，而是你做的所有小决定的总和。

一个下拉组合框的位置，表达了它存在的原因

所以要重视这些小决定……它不只涉及下拉组合框的位置，也涉及它为什么要存在的原因。一个人如何使用你的产品去完成一项任务，其驱动力是这个人为什么必须采取某一步行动。

把注意力集中到最重要的地方：用途和目标

其次，这个定义让我们把注意力集中到最重要的地方：一个具体产品的用途和目标。你以做的事情有很多。但设计应该是搞清楚你应该做什么的过程。

真正酷的事情：创作出有用的东西

你可以做出世界上样子最酷的产品，但是如果它对人们没有用处和吸引力，那它就没有意义。你需要关注你的目标，在目标上花最多的时间，并总是提供价值。

责权平衡的公司中的角色

最后，这个定义是让设计人员在责权平衡的公司里充当一个角色的载体。它提倡了积极的、早期的设计参与。

设计师不是粉刷匠

设计师应该有机会做更多的事，而不只是粉刷成品。我们应该尽量集中精力分析问题的来源，并有威信来确保采取最佳的解决方案，不管解决方案以何种形式出现。

伟大的设计

这样做的理由很简单：伟大的设计就是你不会要求产品使用者来做的事情，你不会要求别人来做的所有决定，因为你已经花了无数小时来确定最佳决定。

选择问题很重要

这是我们的挑战。作为设计师，我们的工作是让世界变得更美好，既通过创建好的工具，也通过理解问题。我们决定要解决哪些问题，跟我们解决它们的方式一样重要。

你对设计的想法会影响细节

设计本身可以是很多东西，它也可以采取很多种形式。有时我们的产品会变得“过分装饰”，设计也可能同样如此。但你对设计的想法影响到每一个微小的细节，而这些细节最终将构成你的产品。

设计就是关于产品的一套决定

在Quora我们就是这样定义设计的：设计是关于一个产品的一套决定。这些决定构成了一个产品，因为它们最为重要——这些决定推动一切向前进。

Quora设计师推动产品前进

因此在Quora，设计师们正在推动产品前进。他们直接与工程师合作，解决极为困难的问题，并把来自不同背景的人们聚集在一起，让他们与世界公开分享他们的知识。

谢谢大家给我时间来分享Quora设计的定义。如果你有任何疑问，你可以在Quora上找到我。谢谢。

它从发布伊始，几乎见证了互联网从寒冬到复兴的近十年时间，它为用户了解和使用互联网作出了巨大贡献，它是IE系列中生命周期最长的一个版本，也是史上生命周期最长的浏览器产品。

为什么IE6获得如此成功？

Windows XP的成功
WindowsXP是微软目前最成功的一款操作系统，而Windows XP在国内则更是主流，占据绝大部分的市场份额，IE6是集成在Windows XP系统中发布的，XP的份额也就带动了IE6的份额。这其中盗版（雨林木风、深度、蕃茄花园、XX花园之类的）功不可抹，几分钟无人值守全自动安装，比正版还好用（当然不是鼓励使用盗版，其中不乏病毒木马这些破玩意，还是谨慎使用为好）。

IE6自身的进步
对比以前的版本IE6有更加美观的Luna界面，集成化的个人栏，即时通讯Windows Messenger，媒体工具栏，图片工具栏和图像大小自动调整功能，更好地保护个人隐私，更好的稳定性和浏览速度，加入错误报告功能，拦截弹出的ActiveX、加载管理器（SP2）。

良好的用户体验，固有的使用习惯
IE6相较IE7，IE7更为轻巧和快速，Firefox的操作相对复杂，界面也不够友好，Opera、Safari本身知道的人就很少，尽管谷歌浏览器Google Chrome非常优秀，但还远没到大众化的程度。长期的使用弹出多个窗口的浏览方式用户已经习惯，面对TAB式的浏览器不知所从，比如用户还是习惯开个窗口偷菜。

用户与开发者的循环
由于IE6的用户数量庞大，许多网站开发者就选择了以大众为准。他们竭力满足用户，去使用户在自己网站上得到最大化的体验。

大部分的网银和政府网站对IE6支持良好
用过国内网银的都知道，好像所有银行的网上银行都是对IE6支持良好，有的甚至IE8都不支持，更别说Firefox、Chome之类的浏览器了，政府网站就更多了。

Windows VISTA的失败与IE7不给力
在VISTA系统失败的同时，VISTA集成的IE7也没能很好的推广，初期IE7也爆出一大堆问题，其实IE8也是一个不错的选择。

基于IE内核的浏览器的助力
相信使用遨游，360安全浏览器的人也不少，这些基于IE内核的浏览器很好的补充了IE6的各种功能和性能上的缺陷。

网民对网络安全不够重视
大部分网民对IE6的安全缺陷都并不了解，所以懒得升级浏览器（当然这其中也有盗版的功能，盗版无法通过Windows update来更新）。

现在的IE6

IE6使微软在浏览器大战中大获全胜，取得压倒性的市场占有率，以致微软不再大力投入IE的开发，有长达5年的时间未对IE6进行根本性的效能升级或推出新版本。在这段期间，IE6的各种设计不良一一浮现，引起广大用户的不满并饱受批评。

无可否认的是，在越来越多新技术涌现的今天IE6已经难堪重负，被开发者广为诟病的标准化问题也是IE6的重大硬伤。而微软不断推出Internet Explore的后续版本（7、8以及9）以改进对新技术和标准化的支持，但是受限于Windows XP在全球范围内取得的巨大成功，以至于和它一起搭售的IE6也颇受用户的喜爱，市场占有率居高不下，消费者对于浏览器厂商吹嘘的那些技术名词看起来并不感冒。

微软继续鼓励用户升级到安全和性能更占优势的新版本浏览器，同时通过系统自动更新为用户推送浏览器更新；第三方浏览器在为了欢迎微软向标准化靠拢，也为了获取更多的用户，也纷纷打出了放弃IE6的口号；而开发者和技术爱好者也纷纷呼吁大家鼓励身边人放弃IE6，升级到新版更好用更领先的浏览器。

CSS3对于我们Web开发者来说不只是新奇的技术，更重要的是这些全新概念的web应用给我们带来更多无限的可能性，也极大地提高了我们的开发效率。我们将不必再依赖图片或者Javascript 去完成圆角、多背景、用户自定义字体、3D动画、渐变、盒阴影、文字阴影、透明度等提高Web设计质量的特色应用。

CSS3在选择器上面的支持

利用属性选择器我们可以根据属性值的开头或结尾很容易选择某个元素，利用兄弟选择器可以选择同级兄弟结点或紧邻下一个结点的元素，利用伪类选择器可以选择某一类元素，CSS3在选择器上的丰富支持让我们可以灵活的控制样式，而不必为了选择某些元素给他们加上如”odd”或”even”这样的类名。

CSS3在样式上的支持

有一个调查说开发者最期待CSS3的特性是什么，最后票数最多的是“圆角”，不错，圆角这个功能可以给我们这些前端工程师省去很多时间和精力去切图拼凑一个圆角。CSS3还支持阴影，盒阴影以及文本阴影，渐变，之前你可能是通过IE的滤镜看到过，其实CSS3实现起来更加方便。@font-face可以自定义字体，如果用传统的方式，VD把一个带有特殊文字的设计图给你让你来实现的话你可能会把它做成一个图片，而通过CSS3用@font-face就可以了。CSS3对于连续文本换行也新增了一个属性word-wrap,你可以设置其为normal(不换行)或break-word(换行)，这解决了连续英文字符出现页面错位的问题，也不需要后端去截取这个连续字符。使用CSS3你还可以给边框加背景，这在iphone上也有应用的例子。CSS3在背景上支持背景调整大小，如当你用一张大图要做一个小的元素背景时可以通过background-size来调整背景图的大小来适应这个元素。CSS3支持opacity, rgba和hsl/a, opacity和rgba的区别是opacity设置的透明对其内容也会产生影响，而rgba只对你应用的元素产生影响。CSS3在布局上对于盒模型提供了支持，可以设置box-sizing为content-box或border-box，应用为content-box就是正常的模式，而应用为border-box和IE5.5的盒模型很相似，即元素的宽度包括border和padding，这个在布局上可能会比较方便，不用去管到底这个元素会占用多大的宽度，而用content-box还需要手动计算一下这个元素实际占用的宽度。

CSS3对于动画的支持

CSS3支持的动画类型有：transform(变换)、transition(过渡)和animation(动画)。你可以对特定的属性设置transition，transiton和animation的区别不大，animation的动画是自己定义的，面向的更多的是脚本开发者，往往更加复杂。

为了使用大部分CSS3特性，我们不得不与原来的属性一起使用生产商专有扩展。原因是直到现在，大部分浏览器只支持部分CSS3属性。最常见的私有属性是用于Webkit核心浏览器的(比如, Safari)， 它们以-webkit-开始，以及Gecko核心的浏览器(比如, Firefox)，以-moz-开始，还有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它们自己的属性扩展（目前只有IE8支持-ms-前缀）

那我们在开发中该如何去用CSS3呢？

我觉得首先是遵循一个优雅降级的原则，比如前面谈到的圆角，我们可以针对Firefox和Safari等这些支持圆角的浏览器中应用CSS圆角，而那些不支持CSS圆角的浏览器则显示为直角。其次就是对于不支持CSS3的浏览器可以使用Javascript来实现，如CSS3任何元素支持:hover伪类，我们就可以对只支持链接:hover的IE6用JS来实现。最后就是在向用户或老板推广新技术的同时也要关注他们的目标与可行性，不能为了技术而技术。

点击查看CSS3 DEMO，需要 Firefox3.5+ / Safari4.0+ / IE9.0+ / Chrome 3+ / Opera 10.5+ / Konqueror 4.4+