Question

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

 .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设置）更改/强制。

修复网页，使其成为有效标记和use a validator to ensure it is valid。（有趣的是，w3c验证器猜测它是HTML5而IE9将页面默认标记为怪癖。另外，我只能让IE9在IE9 / IE7模式下“看起来非常错误”。）

同时修复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

IE9与HTML5的兼容性

3 个答案: