Question

我继承了一个Web应用程序，其中前端使用新的HTML5标记（标题，导航，部分标记）和新的CSS3样式属性（圆角边框）。该网站在Google Chrome和Safari中看起来很棒。

然而，客户现在抱怨该网站因IE7和IE8而中断。一切都不对齐，大多数风格都没有渲染。

使这个网站在IE7和IE8中运行的最简单方法是什么？我一定要吗： a）应用一些hack使IE浏览器接受新的HTML5和CSS3功能？ b）完全重写前端？

Answer 1

Try this lovely script (.js) :)
对于圆角，我使用an other script (.htc)

使用第一名：

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

使用第二个像：

-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
behavior: url(border-radius.htc);

快乐的网站建设：）

原始链接不再有效，HTML5shiv已移动。

现在可以在GitHub上找到

https://github.com/aFarkas/html5shiv

Answer 2

对于HTML5，我建议使用Remy Sharp's HTML5 Shim，但要查看效果，您的IE用户需要启用JavaScript。基本上它利用了IE6 / 7/8中的一个错误，它允许HTML5元素在使用document.createElement函数首次在JavaScript中创建后被识别。

对于你的CSS，有一些不同的hacks，例如CSS3 PIE使用“behavior”属性（IE是唯一的）来模拟CSS3效果。我个人也没有这样做，因为根据我的经验，他们很容易打破，最终比他们的价值更麻烦。相反，我倾向于编写我的CSS，以便它在IE中优雅地降级，这样圆形按钮看起来很方形，但看起来仍然很好。

Answer 3

您可以尝试css3pie http://css3pie.com/，这有助于解决css3问题。

Answer 4

modernizr http://modernizr.com/将是一个不错的选择。

Answer 5

要添加到Karl和Alistair，我在我的网站上遇到了CSS3Pie的问题。我使用了四个月前的CSS代码，CSS3渐变阻止了<input type="text"/>字段显示在IE7或IE8中。只有当我再次访问他们的网站并看到他们的新CSS代码才有效。

课程总是检查插件网站上的最新代码

Answer 6

无论新的语义标签如何，如果你打算在IE7 / 8中产生CSS3效果，你当然可以使用asp.Net图形类作为IE7 / 8的后备。使用.net图形可以创建的一些效果是 -

边界半径，线性渐变，径向渐变，盒阴影..

您可以使用图形类在asp.net页面中创建这些效果，并将该页面渲染为任何HTML元素的背景图像。即。

<div style="background:url(http://127.0.0.1/index/yourpagename.asp?param1=value1&param2=value2)"></div>

OR

<img src="http://127.0.0.1/index/yourpagename.asp?param1=value1&param2=value2" />

其中参数值是根据创建效果所需的输出输入的。即高度，宽度，颜色等。

IE7和IE8的HTML5和CSS3

6 个答案: