0

我一直在努力让阴影在 IE 上工作……它们在 chrome、safari 和 firefox 中运行良好！有人有这方面的经验吗？我把网站放在了上面，这样你就可以看到完整的代码和输出。

测试地点

我正在使用lesscss，所以也许这是我的问题？我希望不是！！！我也在使用 IE CSS3 Fix，ie-css3.htc我使用的代码如下......我试图在没有 htc 的情况下这样做，但没有运气......至少 htc 让我的背景渐变到在 IE 中工作......在它只显示蓝黑色之前，默认的 Microsoft 背景渐变颜色。

预定义.less

.RUNgradient(@COLOR: @CLR1){
  @CLRL:lighten(@COLOR, 10%);
  @CLRD:darken(@COLOR, 10%);
  background-color: @CLRL;
  background-repeat:repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(@CLRL), to(@CLRD));
  background-image: -moz-linear-gradient(top, @CLRL, @CLRD);
  background-image: -ms-linear-gradient(top, @CLRL, @CLRD);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @CLRL), color-stop(100%, @CLRD));
  background-image: -webkit-linear-gradient(top, @CLRL, @CLRD);
  background-image: -o-linear-gradient(top, @CLRL, @CLRD);
  background-image: linear-gradient(top, @CLRL, @CLRD);
  behavior: url(css/ie-css3.htc);
}

样式.less

div.wrapper{
    width:500px;
    margin:25px auto;
    padding: 10px 25px;
    text-align:center;
    .RUNgradient;
    .RUNshadow;
    p{
        font:24px @HEADERFONT;
        color:#ffffff;
        .RUNtextshadow;
    }
}

过滤器就是答案！几乎...

对于梯度，

 filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@CLRL~", EndColorStr="@CLRD~")";

而对于阴影，

 filter: ~"progid:DXImageTransform.Microsoft.shadow(color="@SCLR~", Direction="@DIR~", Strength="@STR~")";

唯一剩下的就是改变方向，使阴影在元素周围可见，而不仅仅是一侧。

解决方案

在研究了 Microsoft Filters 之后，我想出了如何获得类似的效果。我喜欢的角落有点粗糙，但这比以前更近了！

这是我使用的影子文件管理器...

.RUNshadow(@BLURRING:10px){
    @SCLR:#111111;
    @DIR:225;
    @DIR2:45;
    @DIR3:135;
    @DIR4:315;
    @STR:4;
  box-shadow: 0px 1px @BLURRING #111111;
  -moz-box-shadow: 0px 1px @BLURRING #111111;
  -webkit-box-shadow: 0px 1px @BLURRING #111111;
  filter: ~"progid:DXImageTransform.Microsoft.shadow(color="@SCLR~", Direction="@DIR2~", Strength="@STR~")
     progid:DXImageTransform.Microsoft.shadow(color="@SCLR~", Direction="@DIR~", Strength="@STR~")
     progid:DXImageTransform.Microsoft.shadow(color="@SCLR~", Direction="@DIR3~", Strength="@STR~")
     progid:DXImageTransform.Microsoft.shadow(color="@SCLR~", Direction="@DIR4~", Strength="@STR~")";
}
4

3 回答 3

1

我一直在努力让阴影在 IE 上工作……它们在 chrome、safari 和 firefox 中运行良好！有人有这方面的经验吗？”

是的，这很正常。大多数人不打扰。记得问问自己，网站是否需要在每个浏览器中看起来完全一样？

如果你真的想要这个，你必须使用 IE 的渐变过滤器。将以下样式添加到您的RUNgradient类中：

filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@CLRL~", EndColorStr="@CLRD~")";
于 2012-05-11T21:19:04.317 回答
0

对于它们两者，您都可以使用 IE 过滤器。

您可以使用gradient filter渐变和Shadow filter阴影。渐变滤镜效果很好，阴影滤镜看起来很糟糕。

您可以在过滤器的文档中阅读如何使用它们。但如果你想自动完成，你需要看看CSS3如何处理过滤器并将渐变转换为 IE 过滤器渐变。

于 2012-05-11T21:20:25.320 回答
0

您需要将这些行添加到样式标签以使其在 IE 中工作，

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222'); /* IE6 和 IE7 */

-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222')"; /* IE8 */

示例代码片段：

.ms-viewheadertr ms-vhltr { background: #222 ;/当渐变不填充时，它会填充颜色/

背景：-webkit-linear-gradient(#444, #222);/* 适用于 Safari 5.1 到 6.0 */

背景：-moz-linear-gradient(#444, #222);/* 对于 Firefox 3.6 到 15 */

背景：-o-linear-gradient(#444, #222);/* 对于 Opera 11.1 到 12.0 */

background: linear-gradient(#444, #222);/* 标准语法 */

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222'); /* IE6 和 IE7 */

-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222')"; /* IE8 */

}

于 2015-05-13T05:05:03.213 回答