IE9 与 HTML5 的兼容性答案

【问题标题】：IE 9 compability with HTML 5IE9 与 HTML5 的兼容性
【发布时间】：2013-03-04 00:27:47
【问题描述】：

我创建了一个网站 http://www.gkduniya.com 。使用 Mozilla 和 chrome，类别部分还可以。但是对于 IE 9，类别部分放错了位置。请检查它以获取详细信息。我正在使用下面的 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%); 
 }

请帮助，以便它也适用于 IE 9。

【问题讨论】：

在我的 IE9 (9.0.8) 上，类别部分放置正确。唯一不起作用的是渐变，原因很明显（您需要添加不带前缀的 box-shadow 和渐变）。
确保 IE9 是在 IE9/9 模式下运行。它有一种“降级”的荒谬趋势..（曾经在 IE8 或更低版本中看到过 ACID 2/3 测试的结果吗？）
（另外，该页面有荒谬数量的 JavaScript 错误。可能还想通过验证器运行标记；谁知道还有什么问题。）

标签： html internet-explorer css internet-explorer-9

【解决方案1】：

哎呀！这是错误的：

<!DOCKTYPE HTML>

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

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

还修复了 JavaScript 错误，这样它就不会在 IE 中显示一堆令人讨厌的错误消息:(

【讨论】：

在索引页面中是，是的，在其他页面中是。它现在我正在索引页面上工作。但是遇到这个问题。

【解决方案2】：

对我来说看起来不错，只需添加不带前缀的 box-shadow 即可。同样，为背景添加不带前缀的gradient。

【讨论】：

【解决方案3】：

在您的 CSS 中添加无前缀 box-shadow 并为渐变问题添加

-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

【讨论】：

感谢您的帮助。我是语言新手。可以告诉我将这些代码放在 CSS 文件中的确切位置。
复制以上三行并在关闭.gradientBoxesWithOuterShadows{之前粘贴。 . . } 在你的 CSS 中
您的站点存在对齐问题，请替换您的style.css 为Width-1080 以保持当前宽度和站点中心对齐或替换 @ 987654323@css 支持所有显示器，许多用户仍在使用 1024x780 CRT 显示器。