IE6,7,8 中的 CSS box-shadow答案

【问题标题】：CSS box-shadow in IE6,7,8IE6,7,8 中的 CSS box-shadow
【发布时间】：2013-01-14 20:18:08
【问题描述】：

我知道它不受支持...我尝试使用 PIE。我已将 PIE.htc 文件放在与 CSS 相同的文件夹和 IMAGE 文件夹中。使用“../images/image.png”路径加载图像没有问题。

代码如下：

.ma-footer-container { 
background: #fff;
margin:0px auto; 
color: #333333; 
padding-top: 10px; 
-moz-box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.33);
-webkit-box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.33); 
box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.33); 
behavior: url(PIE.htc);
}

再试一次：

.ma-footer-container { 
background: #fff;
margin:0px auto; 
color: #333333; 
padding-top: 10px; 
-moz-box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.33);
-webkit-box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.33); 
box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.33); 
behavior: url(../images/PIE.htc);
}

没有任何影响。看起来盒子阴影被完全忽略了。不显示在 IE 开发者工具中...

这是另一个尝试（使用绝对路径）。我使用的图片有如下网址： “http://www.myStore.com/skin/frontend/default/ma_kidstore/images/facebook_icon.png”

.ma-footer-container { 
background: #fff;
margin:0px auto; 
color: #333333; 
padding-top: 10px; 
-moz-box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.33);
-webkit-box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.33); 
box-shadow: 0 10px 80px 0 rgba(0, 0, 0, 0.33); 
behavior: url(/skin/frontend/default/ma_kidstore/images/PIE.htc);
}

【问题讨论】：

PIE.htc 是否使用正确的 Mime 类型提供服务？
PIE.htc 需要是绝对的，因为 IE 解析的是相对于文档的 URL，而不是 css 文件的 URL（再次感谢 IE）...
检查您的服务器日志以查看是否为 PIE.htc 请求了正确的 URL。如果您在日志中收到 404 错误，您应该能够使用它们来确定正确的 URL 应该是什么。
系统日志中没有任何内容。我按照建议使用了绝对路径：“/skin/frontend/default/ma_kidstore/images/PIE.htc”，因为图像 URL 是“mystore.com/skin/frontend/default/ma_kidstore/images/…”仍然没有。

标签： css css3pie

【解决方案1】：

我不久前放弃了这个。解决方案是：IE6、7 和 8 的事，我不屑一顾。

【讨论】：

最后，an answer to my ie6 related problems。赞成。

【解决方案2】：

不知何故，我也无法使用 CSS 应用 PIE，但 JavaScript 解决方案帮助我解决了问题。

在 HTML 文件的标签中，

<!--[if lte IE 8]>
  <script src="styles/build/PIE.js"></script> 
<![endif]-->

在此之后，或在页面末尾结束之前，

<script type="text/javascript">
// providing CSS3 Pie behavior to elements
if(window.PIE)
{
  var containers = document.querySelectorAll('.ma-footer-container');
  for(var i = 0; i < containers.length; i++)
  {
    PIE.attach(containers[i]);
  } 
}
</script>

【讨论】：

将在下周尝试您的提案并发布结果。