IE 9与HTML 5的兼容性

Question

我创建了一个网站http://www.gkduniya.com 。 使用Mozilla和chrome，类别部分就可以了。 但是，对于IE 9，类别部分放错了位置。 请检查它的详细信息。 我正在使用下面的CSS代码制作gradientbox：

 .gradientBoxesWithOuterShadows { 
  height:auto;
  width: 240px; 
   padding: 20px;
  background-color: white; 

/* outer shadows  (note the rgba is red, green, blue, alpha) */
 -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4); 
 -moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);

/* rounded corners */
 -webkit-border-radius: 12px;
 -moz-border-radius: 7px; 
  border-radius: 7px;

 /* gradients */
 background: -webkit-gradient(linear, left top, left bottom, 
 color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5)); 
 background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%); 
 }

请Plz帮助，使其也可以与IE 9一起使用。

Answer 1

糟糕！ 这是错误的：

<!DOCKTYPE HTML>

这样的无效DOCTYPE会将IE9设置为在“ Quirks模式文档”中运行，除非由IE9开发人员工具（或其他随机Windows设置）更改/强制执行。

修复页面，使其成为有效的标记，并使用验证器确保其有效 。 （有趣的是，w3c验证程序将其猜测为HTML5，而IE9将页面默认标记为古怪。此外，在IE9 / IE7模式下，我只能让IE9“看起来明显错误”。）

还要修复JavaScript错误，这样它就不会产生大量错误消息，这些消息在IE中非常烦人：:(

Answer 2

对我来说很好，只需添加未添加前缀的box-shadow ，您就可以开始了。 同样，为背景添加无前缀的gradient 。

Answer 3

将无前缀box-shadow添加到CSS中，并为Gradient问题添加

-ms-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%); /* for IE-10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFF', EndColorStr='#D5E4F3'); /* IE6–IE9 */
linear-gradient(top, white 0%, white 55%, #D5E4F3 130%); /* for all */

有关进一步的轻松开发，请参阅CSS Gradient Background Maker。