工具集

Modernizr

如果你使用高级CSS属性，Modernizr 将是一个非常有用小型JavaScript。它为你的页面html标签添加一些类（class），来测试浏览器是否支持一些特定的CSS属性，像：

    * @font-face
    * rgba()
    * hsla()
    * border-image
    * border-radius
    * box-shadow
    * Multiple backgrounds
    * opacity
    * CSS animations
    * CSS columns
    * CSS gradients
    * CSS reflections
    * CSS 2-D transforms
    * CSS 3-D transforms
    * CSS transitions

比如border-image，当一个页面加载到的浏览器支持它，将会返回borderimage，如果浏览器不支持将返回no-borderimage。

Modernizr 不会使不支持这些属性的浏览器变的支持，但是给出的重要信息（在表单里的类）是可以用在样式表里面——引用独立选择符和属性到元素。

IE-7.js

IE-7.js使得IE5+的行为像IE8,支持更多的高级选择符并修复了部分渲染bug，这里有部分来自creator’s websitee的摘录：

添加了高级选择符的支持：

 >, + and ~; attribute selectors; :hover, :active, :focus for all elements; :first-child, :last-child,  :o nly-child, :nth-child, :nth-last-child; :checked, :disabled, :enabled; :empty, :not; :before, :after, :content; :lang

使用标准盒模型。

支持 min- 和 max-width 还有 -height.

支持PNG alpha透明（但是没解决PNG背景重复和背景定位时的问题）。

缺点是这个技术需要可运行javascript的环境，这是不幸的。所以，小心给那些设置js不可用的用户可接受的站点版本，特别是一些脚本不能执行，或者最坏的情况是，缺少JavaScript将破坏站点的设计。

实例

常言道，说起来容易做起来难。所以，我们用一些优秀的例子将刚才提到这些新东西付诸实践。这是一些我们访问的在不同浏览器渲染结果不同的网站。在某些情况下，差别显而易见，但是开发人员选择接受这些不同。

Twitter


Twitter – Firefox

Twitter – IE6

WordPress

WordPress – Firefox
WordPress – IE6

WWF


WWF – Firefox

WWF – IE6

总结

记得写这篇文章的初衷是想教大家怎么样hack IE还有处理它的缺陷甚至如何利用JavaScript实现效果。（现在）恰恰相反，这是篇解释设计建立站点需要知道的跨浏览器差异。

你没有看到过用户因为看到Twitter或者WordPress没有圆角而引起的暴动吧；他们甚至没有感到失落，因为那些差异
基本没有破坏站点。人民仍然可以使用站点获得良好体验。大多数情况下，他们甚至没注意到这些！

所有我们需要做的是客气但严谨的向客户解释，这样就是不断进化的web的贡献。

目录