如何为所有浏览器（包括 IE7 及更高版本）制作 css3 和 html5 兼容的网站
是否有任何单一框架可以让我构建一个兼容所有浏览器（包括 IE7 及更高版本）的 css3、html5 网站？ http://html5boilerplate.com/ 样板可以帮助我吗？
Is there any single framework with which I can build a css3, html5 website that is compatible for all browsers including IE7 and later? Can http://html5boilerplate.com/ boilerplate help me in this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您永远无法让 IE7 或 IE8 渲染引擎实现与 HTML5、CSS3 和其他现代技术的完全兼容。他们根本没有能力做到这一点。
不过，有一些技巧、工具和插件可以帮助您成功。
像 Modernizr 这样的工具将帮助您检测支持哪些功能，让您的网站有机会解决它。
无论如何，jQuery 是一个很棒的库，但在这种情况下特别好，因为它从开发人员那里抽象出了许多浏览器差异。有些事情在大多数浏览器中很容易，但在 IE 中却很痛苦； jQuery 吸收了很多此类东西，并且无论如何都让它变得简单。
Dean Edwards 的 IE7.js 和 Selectivzr 都是 Javascript 库，它们为 IE 提供了对旧版本中缺少的许多 CSS 选择器的支持。这使您可以编写样式表，而不必过多担心 IE 支持的内容。 （IE7.js 还修复了 IE 的许多其他故障和缺失的功能）
CSS3Pie 是针对 IE 的 hack，增加了对 CSS
的支持border-radius、渐变和box-shadow。事实上，有一大堆类似的黑客攻击，都是为了向旧版本的 IE 中添加它所缺少的功能。 Modernizr 的网站上有一个很大的列表：https://github.com/Modernizr/Modernizr/ wiki/HTML5-Cross-Browser-Polyfills
然而，所有这一切有一个很大的警告。速度。 IE<=8 是一个缓慢的浏览器。它有一个缓慢的 Javascript 引擎。事实上所有这些 hack 都是基于 JavaScript 的。您可能会在任何给定站点上运行其中一些，但尝试使用足够多的它们来为 IE 提供诸如对 HTML5 和 CSS3 的全面支持之类的功能，将会使浏览器速度减慢至无法使用的程度。
不过，还有另一个角度可以解决这个问题，那就是 Google 的 IE 框架插件。这基本上将整个 Google Chrome 浏览器引擎安装到 IE 中。用户仍在运行 IE shell，但网页的呈现方式与最新版本的 Chrome 中一样。
这听起来不错，但当然它并不完美。它的主要缺点是最终用户必须手动将其安装到他们的计算机上，这意味着作为 Web 开发人员，您无法真正控制它是否存在。因此，您不能将其添加到网站中并期望一切都能神奇地发挥作用。
最后，您可能还对 CanIUse.com 感兴趣，它提供了各种功能的浏览器支持表，让您一目了然。每个浏览器的不同版本不支持哪些内容。
You will never get the IE7 or IE8 rendering engine to achieve full compatibility with HTML5, CSS3, and other modern technologies. They are simply not capable of it.
However there are some hacks, tools and plugins which can get you part of the way.
Tools like Modernizr will help you by allowing you to detect which features are supported, to give your site a chance to work around it.
jQuery is a great library anyway, but is particularly good in this context because it abstracts a lot of browser differences away from the developer. Some things are easy in most browsers but a real pain in IE; jQuery takes a lot of that kind of stuff and makes it easy regardless.
Dean Edwards' IE7.js and Selectivzr are both Javascript libraries that give IE support for lots of the CSS selectors which were missing in older versions. This allows you to write your stylesheets without worrying so much about what IE supports. (IE7.js also fixes a number of IE's other glitches and missing features too)
CSS3Pie is a hack for IE that adds support for CSS
border-radius, gradients andbox-shadow.There are in fact a whole load of hacks along these lines, all aimed at adding features to older versions of IE which it is missing. Modernizr's website has a big list of them here: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
However there is one big caveat to all of this. Speed. IE<=8 is a slow browser. It has a slow Javascript engine. Virtually all of these hacks are javascript based. You might get away with running a few of them on any given site, but trying to use enough of them to give IE anything like full support for HTML5 and CSS3 will slow the browser down to the point of being unusable.
There is one other angle to approach this question though, and that's Google's Frame plugin for IE. This basically installs the entire Google Chrome browser engine into IE. The user is still running the IE shell, but the web page is rendered as it would be in an up-to-date version of Chrome.
This sounds great, but of course it isn't perfect. The main down-side of it is that the end user has to install it manually onto their computer, which means that you as a web developer have no real control over whether it's there or not. So its not something you can just add to your site and expect everything to magically work.
Finally, you may also be interested in CanIUse.com, which gives browser support tables for various features, allowing you to see at a glance what is and what isn't supported in various versions of each browser.
HTML 5 更像是各种技术的总称，而不是任何一种事物或框架。实际上，您所做的任何实现都应该优雅地降级——这就是使站点浏览器兼容的原因。检测浏览器支持的内容，然后找到对旧版友好的替代方案。
查看：http://accessites.org/site/2007/02 /graceful-degradation-progressive-enhancement/
以及：http://diveintohtml5.ep.io/detect.html
祝你好运。
HTML 5 is more an umbrella term for a variety of technologies than any one thing or framework. Really, any implementation you do should degrade gracefully-- and that is what makes the site browser compatible. Detect what the browser supports, and then have alternatives that are legacy friendly.
Check out: http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/
And: http://diveintohtml5.ep.io/detect.html
Good luck.
Modernizr 是一个开源 JavaScript 库，可帮助您构建下一代 HTML5 和 CSS3 驱动的网站。
MS 将其包含在 ASP.net MVC 模板项目中
Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.
MS is including it in the ASP.net MVC template projects
html5boilerplate 不会帮助你。
正如其他人所说，html5 和 css3 是非常广泛的术语，没有任何框架可以实现这两者提供的所有功能。事实上，在声称支持它们的浏览器中，它们并没有得到同等的支持。更重要的是，即使是 W3C 人员（编写 html5 和 css3 规范的人）也尚未确定它们将包含哪些功能或实现它们需要哪些步骤。你明白了......
但是......如果你将你的需求缩小到一些特定的功能，比如视频、音频标签、画布绘图、漂亮的 CSS 效果、文件 API 或其他，你可以找到实现（或尝试模仿）以跨浏览器的方式（或多或少）使用可用技术。
html5boilerplate won't help you.
As others have said html5 and css3 are very broad terms, there's no framework that implements all of the features provided by both of these. In fact they are not equally supported in browsers that say that they support them. And more, even W3C guys (who write the specs for html5 and css3) are not yet established on what features they will include or what steps will be required to implement them. You get the idea...
But.. if you narrow your requirements to some specific features, like video, audio tags, canvas drawing, nifty css effects, File API, or others, you CAN find frameworks that implement (or try to mimic) them with available technologies in cross-browser manner (more or less).