ie中带有阴影的图像的后备边框答案

【问题标题】：fallback border for image with shadow in ieie中带有阴影的图像的后备边框
【发布时间】：2013-11-27 23:12:18
【问题描述】：

所以我有一个不错的盒子阴影，它似乎可以在除 ie 8 及以下的所有浏览器中使用。我需要我的网站与 IE 8 兼容。

这是我所指的效果： http://unifiedforuganda.com/ugandanprograms.html

这里是相关的css：

    .program-image {
        position: relative;
        float: left;
        width: 400px;
        padding: 2px;
        margin: 10px 20px 10px 0;
        -moz-box-shadow: 3px 3px 15px 3px #414141;
        -webkit-box-shadow: 3px 3px 15px 3px #414141;
        box-shadow: 3px 3px 15px 3px #414141;
    }

我不关心 IE 中显示的阴影，但是否只有在不渲染阴影时才能为图像设置黑色边框？如果可能，我想避免使用 IE 条件表

编辑：似乎我什至不得不使用条件 cmets 或使用我不想使用的 hack。现在只需要弄清楚为 IE 使用条件 cmets....

【问题讨论】：

如果你避免使用条件 CSS，你希望它如何有条件地改变？
这就是我要问的原因。就像 -webkit-text-fill-color 属性覆盖 safari/chrome 中的颜色属性一样。所以我问是否有与 ie 和borderds 等价的东西
是的，它是条件语句！
-webkit-text-fill-color 是有条件的 CSS。它只对 Webkit 浏览器有影响。为了让它按照你想要的方式工作，你需要使用一些条件 CSS。添加<!--[if lt IE 9]> 并不是那么糟糕。不幸的是，我们仍然必须适应旧版浏览器，但 IE8 仍然在野外，不得不为预算不允许他们从 XP 盒子升级的企业用户设计网站，我感到你的痛苦......跨度>
好吧，我投降。有人可以帮我处理 IE 8 及更低版本的条件语句（因为 IE 9 及更高版本支持阴影正确吗？）。我从来没有写过条件 css，我只需要这一页，所以我不想创建一个全新的 css 表，只需将它插入到我现有的表中......

标签： html css internet-explorer border shadow

【解决方案1】：

如您所见here，box-shadow 直到 IE9 才被支持。但是here is a SO post 解释了 box-shadow 在 IE8 及以下版本中的可用性。

【讨论】：

感谢您提供的链接，我在之前的研究中看到了这一点，然后才询问，这似乎有点“黑客”。是官方支持还是我不太明白它是如何工作的
几乎任何使 IE8 和更低版本充当“普通”浏览器的东西都是某种 hack，但这并不意味着它不起作用。

【解决方案2】：

所以我最终在 html 文档中使用了条件 cmets...比我想象的要简单...这是我最终使用的代码：

<!--[if lte IE 8]>
     <style type="text/css">
         .program-image { border: 1px solid black; }
    </style>
<![endif]-->

这将针对 .program-image 类，该类通常具有在大多数其他浏览器中工作的盒子阴影，但是当失败时，上面的代码将启动并应用一个小的黑色边框......这是 css：

.program-image {
position: relative;
float: left;
width: 400px;
padding: 2px;
margin: 10px 20px 10px 0;
-moz-box-shadow: 3px 3px 15px 3px #414141;
-webkit-box-shadow: 3px 3px 15px 3px #414141;
box-shadow: 3px 3px 15px 3px #414141;
}

【讨论】：