CSS 框阴影在 IE6 和 IE7 中不起作用答案

【问题标题】：CSS Box shadow not working in IE6 and IE7CSS 框阴影在 IE6 和 IE7 中不起作用
【发布时间】：2011-10-14 23:33:40
【问题描述】：

我正在开发一个 Drupal 站点。客户希望网站在包括 IE6 在内的所有浏览器中看起来都完全相同。 IE 中的 box-shadow 属性存在一些问题。我知道 IE 不支持 CSS3 属性。 IE-6 的 box-shadow 是否有任何替代解决方案，使其看起来像 IE6 和 IE7 中的阴影。我尝试过 css PIE，其中我使用 IE 的 htc 文件来支持 CSS3 属性。但它不起作用。本站网址为Godsak

CSS代码是

.portal-top {
background-color: white;
box-shadow: 0 0 20px #000000;

-moz-box-shadow: 0 0 20px #000000; -webkit-box-shadow: 0 0 20px #000000; 位置：相对；边距：15px 自动 0； }

对于我正在使用的 IE

.portal-top {
background-color: white;
box-shadow: 0 0 20px #000000;
zoom:1;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=145, Strength=3);

}

box-shadow 现在在 IE-7 中显示。但不是我想要的。在 IE-6 中仍然没有显示阴影。看看 Firefox 中的 url，IE 也需要它。可能吗。

提前致谢。

【问题讨论】：

请将zoom=1更改为zoom: 1，如果问题仍然存在，请告诉我们。
@duri ：感谢您的回复。阴影在 IE7 中没有显示，但在 IE6 中还没有。在 IE 7 中，阴影与在 Firefox 中看到的不同。有什么办法可以将阴影颜色放在左侧和顶部。

标签： internet-explorer-7 internet-explorer-6 css

【解决方案1】：

如果你不迎合中国，最好的办法是不要做额外的东西来减轻 IE6 的滑稽动作。

如果因为客户要求而无法选择，请向客户解释您必须为 IE6 做一个完全不同的站点（我上次查看的是欧洲的数字百分比），并且这将花费他几乎如果你这样做，钱就翻倍。不仅是现在，而且随着网站的每次更新。

实际上，没有可维护的方法让这些花哨的 CSS 东西在 IE6 上运行。

【讨论】：

【解决方案2】：

对于 PIE：

您需要在每个其他 css 元素之后包含该行为：

#container{
    margin:0 auto;
    width:900px;
    ...
    behavior: url(css/ie/PIE.htc); /* url at http://www.indivar.info/godsak/ */
}

最后一个样式表，最后一个元素。 URL 是来自页面而非样式表的相对路径

我还要补充一点，不推荐使用@import。你可以试试page speed。

网站看起来很棒。希望对您有所帮助。

【讨论】：

感谢您对网站的好评。我以前使用过 css pie 的行为，但那不起作用，所以我尝试了另一种方式。

【解决方案3】：

我个人认为对您的问题切实可行的唯一解决方案是过度使用图像。没有阴影效果，只有图像。你可以从其他浏览器截屏。

第二种替代方法是“降级”您的网站并仅使用 ie6 支持的元素。

当然有很多 hack 和一些 javascript 变通办法，但这一切都非常混乱，并且在大多数情况下都会花费大量的性能。

如果有人仍然有 ie6，那可能是有原因的。

我想说，网站在不同浏览器中的外观不同是完全正常的。就是这样。当然，每个站点都应该正常工作并呈现漂亮。但是，如果您不以不应该使用的方式误用元素，那几乎可以保证。

如果有人使用 ie6，就没有阴影，仅此而已。

但作为对客户要求的问题的回答，请选择图像解决方案。

【讨论】：