Question

我一直在拉我的头发试图让阴影在IE上工作......他们在chrome，safari和firefox中运行良好！有人有这方面的经验吗？我把网站放好，这样你就可以看到完整的代码和输出。

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

predefine.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);
}

styles.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~")";
}

Answer 1

我一直在拉我的头发试图让阴影在IE上工作......他们在chrome，safari和firefox中运行良好！有人有这方面的经验吗？“

是的，这是正常的。大多数人都不打扰。记得问问自己，Do Websites Need To Look Exactly The Same In Every Browser?

如果您真的想要这个，那么您必须使用gradient filter进行IE浏览。将以下样式添加到RUNgradient类：

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

Answer 2

对于他们两个，你可以使用IE过滤器。

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

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

Answer 3

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

filter：progid：DXImageTransform.Microsoft.gradient（GradientType = 0，startColorstr =＆＃39;＃444444＆＃39;，endColorstr =＆＃39;＃222222＆＃39;）; / * IE6＆amp; IE7 * /

-ms-filter：＆＃34; progid：DXImageTransform.Microsoft.gradient（GradientType = 0，startColorstr =＆＃39;＃444444＆＃39;，endColorstr =＆＃39;＃222222＆＃39; ）＆＃34 ;; / * IE8 * /

示例代码段：

.ms-viewheadertr ms-vhltr { 背景：＃222; / 当渐变不填充时填充颜色 /

background：-webkit-linear-gradient（＃444，＃222）; / *适用于Safari 5.1至6.0 * /

background：-moz-linear-gradient（＃444，＃222）; / *适用于Firefox 3.6到15 * /

background：-o-linear-gradient（＃444，＃222）; / *对于Opera 11.1到12.0 * /

背景：线性渐变（＃444，＃222）; / *标准语法* /

filter：progid：DXImageTransform.Microsoft.gradient（GradientType = 0，startColorstr =＆＃39;＃444444＆＃39;，endColorstr =＆＃39;＃222222＆＃39;）; / * IE6＆amp; IE7 * /

-ms-filter：＆＃34; progid：DXImageTransform.Microsoft.gradient（GradientType = 0，startColorstr =＆＃39;＃444444＆＃39;，endColorstr =＆＃39;＃222222＆＃39;）＆＃ 34 ;; / * IE8 * /

}

CSS Gradients＆amp; IE上的阴影

解决方案

3 个答案: