Question

所以我有一个漂亮的盒子阴影似乎适用于所有浏览器，除了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条件表

编辑：似乎我甚至不得不使用条件评论或使用我不想要的黑客。现在只需要弄清楚使用IE的条件评论....

Answer 1

正如您所见，here，IE9之前不支持box-shadow。但是here is a SO post解释了IE8及以下版本中box-shadow的可用性。

Answer 2

所以我最终在html文档中使用条件注释...比我想象的更简单....这里我最终使用的代码：

<!--[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;
}

具有阴影的图像的后备边框即

2 个答案: