Html 用于 IE7 和 IE8 的 HTML5 和 CSS3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5449502/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 and CSS3 for IE7 and IE8
提问by John
I inherited a web application where the front end uses new HTML5 tags (header, nav, section tags) and new CSS3 style attributes (rounded borders). The website looks amazing in Google Chrome and Safari.
我继承了一个 Web 应用程序，其中前端使用新的 HTML5 标签（标题、导航、节标签）和新的 CSS3 样式属性（圆角边框）。该网站在 Google Chrome 和 Safari 中看起来很棒。
However, the client now complains the website is broken for IE7 and IE8. Everything is out of alignment and most of the styles do not render.
但是，客户现在抱怨该网站在 IE7 和 IE8 上已损坏。一切都不一致，大多数样式都无法呈现。
What is the easiest way to make this website work in IE7 and IE8? Do I have to: a) Apply some hack to make IE browsers accept the new HTML5 and CSS3 features? b) A complete rewrite of the front end?
使本网站在 IE7 和 IE8 中运行的最简单方法是什么？我是否必须：a) 应用一些技巧让 IE 浏览器接受新的 HTML5 和 CSS3 功能？b) 完全重写前端？
回答by Répás
Try this lovely script (.js):)
And for rounded corners i use an other script (.htc)
试试这个可爱的脚本 (.js):)
对于圆角，我使用另一个脚本 (.htc)
use the 1st:
使用第一个：
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
use the 2nd like:
使用第二个像：
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
behavior: url(border-radius.htc);
Happy sitebuilding :)
快乐建站 :)
The original link is no longer active and HTML5shiv has moved.
原始链接不再有效，HTML5shiv 已移动。
Now available on GitHub
现在在 GitHub 上可用
回答by Karl Nicoll
For HTML5, I recommend Remy Sharp's HTML5 Shim, although to see the effect, your IE users will need to have JavaScript enabled. Basically it exploits an error in IE6/7/8 which allows HTML5 elements to be recognised after they have first been created in JavaScript using the document.createElementfunction.
对于 HTML5，我推荐Remy Sharp 的 HTML5 Shim，尽管要查看效果，您的 IE 用户需要启用 JavaScript。基本上，它利用了 IE6/7/8 中的一个错误，该错误允许在使用该document.createElement函数在 JavaScript 中首次创建 HTML5 元素后识别它们。
For your CSS, there are a few different hacks such as CSS3 PIEthat use the "behaviour" property (which is unique to IE) to simulate CSS3 effects. I have personally refrained from these though, since in my experience, they break very easily, and end up being more hassle than they're worth. I instead tend to write my CSS so that it degrades gracefully in IE, so that rounded buttons look square, but still look nice.
对于您的 CSS，有一些不同的技巧，例如CSS3 PIE，它们使用“行为”属性（IE 独有）来模拟 CSS3 效果。不过，我个人避免使用这些，因为根据我的经验，它们很容易损坏，并且最终比它们的价值更麻烦。相反，我倾向于编写我的 CSS 以便它在 IE 中优雅地降级，因此圆形按钮看起来是方形的，但仍然看起来不错。
回答by Alistair Laing
You could try css3pie http://css3pie.com/which would help with the css3 issues.
您可以尝试 css3pie http://css3pie.com/这将有助于解决 css3 问题。
回答by Alex G
modernizr http://modernizr.com/will be a good choice.
Modernizr http://modernizr.com/将是一个不错的选择。
回答by Umesh Chaurasiya
Regardless of new semantic tags, if you intend to produce the CSS3 effect in IE7/8, you could certainly use asp.Net graphics classes as fallback for IE7/8. some of the effect which can be created using .net graphics are -
不管新的语义标签，如果你打算在 IE7/8 中产生 CSS3 效果，你当然可以使用 asp.Net 图形类作为 IE7/8 的后备。可以使用 .net 图形创建的一些效果是 -
Border-radius, linear gradient, radial gradient, box-shadow..
边界半径，线性渐变，径向渐变，框阴影..
You can create these effect in asp.net page using graphics classes and render that page as an background image of any HTML element. i.e.
您可以使用图形类在 asp.net 页面中创建这些效果，并将该页面呈现为任何 HTML 元素的背景图像。IE
<div style="background:url(http://127.0.0.1/index/yourpagename.asp?param1=value1¶m2=value2)"></div>
OR
或者
<img src="http://127.0.0.1/index/yourpagename.asp?param1=value1¶m2=value2" />
where parameters value are input in terms of output required to create the effect. i.e. height, width, color etc.
其中参数值是根据创建效果所需的输出输入的。即高度、宽度、颜色等。
回答by Danger14
To add on to Karl and Alistair, I encountered an issue with CSS3Pie in my site. I used their CSS code from four months ago and the CSS3 gradients were blocking <input type="text"/>fields from showing up in IE7 or IE8. Only when I revisited their site again and saw their new CSS code did it work.
为了补充 Karl 和 Alistair，我在我的站点中遇到了 CSS3Pie 问题。我在四个月前使用了他们的 CSS 代码，CSS3 渐变阻止了<input type="text"/>字段在 IE7 或 IE8 中显示。只有当我再次访问他们的网站并看到他们的新 CSS 代码时，它才起作用。
Lesson is always check the plugins websites for most recent code
课程总是检查插件网站以获取最新代码
