0

我正在构建一个使用大量阴影和渐变的网站。我可以通过 CSS 的 box-shadow 属性完成很多工作。

唉，我们仍然支持 IE，所以我们需要在这些情况下添加背景图像。

我可能很懒，只是给每个人提供背景图像，但我正在努力为那些使用现代浏览器的人简化事情。理想情况下，我希望这些用户不必请求图像。

因此，如果浏览器支持盒子阴影 (box-shadowSupport)，我将通过 javascript 添加一个额外的类，并且我的 CSS 最终看起来像这样：

.box {
    background: url('myImage.jpg');
}

.box-shadowSupport {
    background: none;
    [box shadow properties go here] 
}

如果 HTML 最终看起来像这样：

<div class="box box-shadowSupport"></div>

会要求图片吗？或者浏览器是否理解由于第二种样式覆盖了背景图像属性而不需要它？

如果请求图像，我需要重新排列我的 CSS 和 javascript，而不是通过级联覆盖样式，我必须交换类，这样第一个类甚至不会在 HTML 中引用。

4

4 回答 4

3

我相信每个网络浏览器都会以自己的方式处理这个问题 - 像往常一样 :) 我的建议是使用像Charles这样的网络代理，看看是否请求了图像。当然，在不同的浏览器中进行测试。

于 2010-01-19T16:18:07.417 回答
2

我建议只是跳过 IE 中的阴影。

大多数人只使用一种浏览器，他们不知道一定有阴影。如果网站在不同的浏览器中看起来不同，只要它们看起来正常（这意味着没有故障），这没什么大不了的。

否则，与 if 标记一起使用，即特定的 css，您可以使用以下方法进行投影：

.box {
    filter: progid: DXImageTransform.Microsoft.dropShadow(
            color=#818181,
            offX=5, offY=5, 
            positive=true);
}

有关更多信息，请参见此处。

于 2010-01-19T16:27:22.637 回答
2

您可能要考虑的是在单独的工作表中定义 IE 特定样式并使用条件注释加载它，如下所示：

<!--[if IE]>
<link rel="stylesheet" id="ie-css" href="ie-specific.css"
    type="text/css" media="all" />
<![endif]-->

这只会加载具有 IE 特定设置的工作表，您可以使用!important标记覆盖其他类。条件注释从 IE5 开始就出现了，任何其他浏览器都会忽略上面的块。

于 2010-01-19T16:18:36.523 回答
1

我很确定所有现代浏览器都会加载“myImage.jpg”。实际上，您提供的代码描述了不使用 javascript 预加载图像的纯 CSS 方式:)

于 2010-01-19T16:37:34.940 回答