为什么伪元素上的滤镜渐变在IE8中不起作用？

时间：2012-05-01 20:29:15

标签： html css internet-explorer-8 pseudo-element

我想创建这样的按钮：
pseudo 3d button

在现代浏览器中，使用插入框阴影和滤镜创建效果 对于IE8 - 选择伪元素 对于IE7 - 我使用包含在条件注释中的特殊标签。

演示：（http://jsfiddle.net/8M5Tt/68/）

/**
 * Button w/o images
 */
html {
    font-size: 62.5%;
    }
body {
    font: normal 1em/1em Arial, Tahoma, Verdana, sans-serif;
    }
 
/* layout */
.btn {
    display: inline-block;
    height: 28px;
    border-width: 1px;
    border-style: solid;
    width: 170px;
    box-sizing: content-box;
    overflow: hidden;
    position: relative;
    z-index: 1;
    }
.btn {
    margin: 15px;
    }
.btn.btn_small {
    width: 130px;
    }

/* ie7 */
.lt-ie8 .btn .before,
.lt-ie8 .btn .after {
    position: absolute;
    right: -1px;
    left: -1px;
    display: block;
    height: 3px;
    }
.lt-ie8 .btn .before {
    top: -1px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=0 );
    }
.lt-ie8 .btn .after {
    bottom: -1px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#80000000',GradientType=0 );
    }
/* /ie7 */

/* ie8 */
.ie8 .btn:before,
.ie8 .btn:after {
    content: ' ';
    z-index: 1;    
    position: absolute;
    right: -1px;
    left: -1px;
    display: block;
    height: 3px;
    }
.ie8 .btn:before {
    top: -1px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=0 );
    }
.ie8 .btn:after {
    bottom: -1px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#80000000',GradientType=0 );
    }
/* /ie8 */

/* typo */
.btn {
    /* 28 / 14 = 2.57142857 */
    font: bold 14px/2 Arial, Helvetica, Tahoma, sans-serif;
    text-transform: uppercase;
    }
.btn:active {
    line-height: 2.4em;
    }

/* color */
.btn {
    background-color: #00cccc;
    color: #fff;
    border-color: #00a8a8;
    border-radius: 3px;
    cursor: pointer;
    box-shadow:
         1px  1px 4px rgba(255, 255, 255, 0.5) inset,            
        -1px -1px 4px rgba(000, 000, 000, 0.5) inset;
    }
.btn:hover {
    background-color: #00ebeb;
    }
.btn:active {
    box-shadow:
        -1px -1px 4px rgba(255, 255, 255, 0.5) inset,            
         1px  1px 4px rgba(000, 000, 000, 0.5) inset;
    }

/* green */
.btn_green {
    background-color: #009900;
    border-color: #009600;
    }
.btn_green:hover {
    background-color: #00c200;
    }

/* red */
.btn_red {
    background-color: #e00000;
    border-color: #c13d00;
    }
.btn_red:hover {
    background-color: #f00000;
    }
<!--
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
-->
<!--[if lt IE 7]> 
    <div class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en">
<![endif]-->
<!--[if IE 7]>
    <div class="no-js lt-ie9 lt-ie8 ie7" lang="en">
<![endif]-->
<!--[if IE 8]>
    <div class="no-js lt-ie9 ie8" lang="en">
<![endif]-->
<!--[if gt IE 8]><!-->
    <div class="no-js no-ie" lang="en">
<!--<![endif]-->

<button class="btn btn_green btn_small ">
    Send
    <!--[if IE 7]> <span class="before"> </span><span class="after"> </span> <![endif]-->
</button>

<button class="btn">
    Buy
    <!--[if IE 7]> <span class="before"> </span><span class="after"> </span> <![endif]-->
</button>

<button class="btn btn_green">
    Activate
    <!--[if IE 7]> <span class="before"> </span><span class="after"> </span> <![endif]-->
</button>

<button class="btn btn_red">
    Delete
    <!--[if IE 7]> <span class="before"> </span><span class="after"> </span> <![endif]-->
</button>

</div>

主要问题：为什么过滤器不能处理IE8中的伪元素？

更新

我猜这些过滤器不适用于css生成的内容，尽管事实上MSDN page没有提到它。

我通过将过滤器应用于像IE7那样的条件元素来解决我在IE8中的问题。

最终演示：（http://jsfiddle.net/matmuchrapna/8M5Tt/73/）

/**
 * Button w/o images
 */
html {
    font-size: 62.5%;
    }
body {
    font: normal 1em/1em Arial, Tahoma, Verdana, sans-serif;
    }
 
/* layout */
.btn {
    display: inline-block;
    height: 28px;
    border-width: 1px;
    border-style: solid;
    width: 170px;
    box-sizing: content-box;
    overflow: hidden;
    position: relative;
    z-index: 1;
    }
.btn {
    margin: 15px;
    }
.btn.btn_small {
    width: 130px;
    }

/* ie78 */
.lt-ie9 .btn .before,
.lt-ie9 .btn .after {
    position: absolute;
    right: -1px;
    left: -1px;
    display: block;
    height: 3px;
    }
.lt-ie9 .btn .before {
    top: -1px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=0 );
    }
.lt-ie9 .btn .after {
    bottom: -1px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#80000000',GradientType=0 );
    }
/* /ie78 */

/* typo */
.btn {
    /* 28 / 14 = 2.57142857 */
    font: bold 14px/2 Arial, Helvetica, Tahoma, sans-serif;
    text-transform: uppercase;
    }
.btn:active {
    line-height: 2.4em;
    }

/* color */
.btn {
    background-color: #00cccc;
    color: #fff;
    border-color: #00a8a8;
    border-radius: 3px;
    cursor: pointer;
    box-shadow:
         1px  1px 4px rgba(255, 255, 255, 0.5) inset,            
        -1px -1px 4px rgba(000, 000, 000, 0.5) inset;
    }
.btn:hover {
    background-color: #00ebeb;
    }
.btn:active {
    box-shadow:
        -1px -1px 4px rgba(255, 255, 255, 0.5) inset,            
         1px  1px 4px rgba(000, 000, 000, 0.5) inset;
    }

/* green */
.btn_green {
    background-color: #009900;
    border-color: #009600;
    }
.btn_green:hover {
    background-color: #00c200;
    }

/* red */
.btn_red {
    background-color: #e00000;
    border-color: #c13d00;
    }
.btn_red:hover {
    background-color: #f00000;
    }
<!--
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
-->
<!--[if lt IE 7]> 
    <div class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en">
<![endif]-->
<!--[if IE 7]>
    <div class="no-js lt-ie9 lt-ie8 ie7" lang="en">
<![endif]-->
<!--[if IE 8]>
    <div class="no-js lt-ie9 ie8" lang="en">
<![endif]-->
<!--[if gt IE 8]><!-->
    <div class="no-js no-ie" lang="en">
<!--<![endif]-->

<button class="btn btn_green btn_small ">
    Send
    <!--[if lte IE 8]> <span class="before"> </span><span class="after"> </span> <![endif]-->
</button>

<button class="btn">
    Buy
    <!--[if lte IE 8]> <span class="before"> </span><span class="after"> </span> <![endif]-->
</button>

<button class="btn btn_green">
    Activate
    <!--[if lte IE 8]> <span class="before"> </span><span class="after"> </span> <![endif]-->
</button>

<button class="btn btn_red">
    Delete
    <!--[if lte IE 8]> <span class="before"> </span><span class="after"> </span> <![endif]-->
</button>

</div>

更新2：

我解决了我的问题，但主要问题仍然没有答案：

  

“为什么过滤器不能处理IE8中的伪元素？”

开始赏金。

更新3： 我在ie8上为过滤器（以及-ms-filter）创建了testcase：

enter image description here

但过滤器仍然不想处理伪元素。

更新4： 我认为Scotts answer最接近事实。

5 个答案:

答案 0 :(得分：41)

问题是“为什么过滤器不能处理IE8中的伪元素？”以下几乎是我能够集中讨论的最终答案。它来自this page的信息。

gradient过滤器是一个“程序表面”（以及alphaimageloader）。程序表面定义如下：

  

程序曲面是在颜色之间显示的颜色曲面   对象的内容和对象的背景。

仔细阅读。它本质上是对象内容和对象背景之间的另一个“层”。你看到问题的答案了吗？由:before和:after创建的内容...是的！ 内容的。特别是MSDN notes：

  

::之前和::之后伪元素指定的位置   文档树中元素之前和之后的内容。内容   attribute与这些伪元素一起指定了什么   插入。

     

生成的内容与其他框交互，就好像它们是真实的一样   元素插入其关联元素内。

现在，如果它是 content 生成的，那么不是包含内容的“对象”，而是内容本身（碰巧有一些类似于可能包含内容的元素对象的行为。

因此，没有“对象”包含“内容”（因为是内容），filter可以在其中放置内容的程序表面由伪元素（即“假元素”）生成。必须将gradient应用于对象，然后将程序表面放置在它与内容之间。

答案 1 :(得分：6)

-ms-filter上的文档 - filter的同义词 - 陈述：

  

对象必须具有要呈现的过滤器的布局。

我的第一个猜测是:before内容未将hasLayout设置为true。虽然它可能没有设置为true，但它可能也没有设置为false 。对于初学者，当我按照hasLayout docs强制内容获取hasLayout = true时（请参阅jsfiddle），它没有解决任何问题。

所以我说这既不是真也不是假。相反，它可能是 undefined 。我在相同的文档中注意到它关于这个属性的来源：

  

物体的 .currentStyle.hasLayout

如果我们看一下它所说的W3 documentation on the content property：

  

生成的内容不会改变文档树。特别是，它不会反馈给文档语言处理器（例如，用于重新分析）。

因此，可能的结论将是生成的内容不是对象，因此它没有currentStyle属性，因此也是没有hasLayout设置为true。这就是过滤器不能对生成的内容起作用的原因，从而回答了这个问题。

乍一看，我以为我在上述小提琴的控制台中找到了一个暗示：

document.querySelectorAll('div')[0].currentStyle.hasLayout; 
// true

document.querySelectorAll('div:before')[0].currentStyle.hasLayout
// Unable to get value of the property 'currentStyle': 
// object is null or undefined

但正如@BoltClock的评论中提到的那样：querySelectorAll cannot access pseudo-elements。

在this msdn introduction on filters中可以找到filter无法对伪元素起作用的另一个提示（尽管 - 只是一个提示），但是说明（强调我的）：

  

过滤器通过过滤器属性

应用于 HTML控件

虽然我不确定“HTML控件”是什么意思，但我不希望:before伪元素生成的内容被视为“HTML控件”。

答案 2 :(得分：0)

您考虑使用CSS3Pie而不是使用IE的filter样式吗？

这是一个IE脚本，它增加了对标准CSS box-shadow和渐变的支持，因此您可以在所有浏览器中编写相同的代码，而不必拥有所有这些特定于IE的样式。

答案 3 :(得分：0)

我已经提供了我的首选解决方案（使用CSS3Pie），但我会将其作为单独的答案发布。

IE8无法使用IE7工作的filter的可能原因是因为IE8改变了filter的语法。

filter是IE特有的专有风格。当微软发布IE8时，他们试图成为“符合标准”的重点。支持非标准风格的“符合标准”的方式是给它一个供应商前缀，这就是微软所做的。

因此，在IE8中，您需要执行以下操作：

-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=0 )";

IE7不支持这种语法，所以你需要它们。

IE8实际上在某些情况下使用旧语法 。它不起作用的情况往往是使用progid:语法的情况。原因是progid之后的冒号导致它是无效的CSS语法，这就是为什么MS在IE8 -ms-filter版本的整个精简版周围添加了引号。

所以简短的回答是，在你的样式表中使用这两个版本，你会没事的。

答案 4 :(得分：0)

哇，这是一个艰难的。

After reviewing this chart，确认IE8 only likes single colons on its pseudo-elements，阅读此possibly related blog article，并做了很多testing in jsFiddle（虽然，与你的73 ?? jsFiddles相比，它很少），我必须得出结论，这是IE8中的一个错误。

IE9可以对伪元素进行渐变（使用base64无意义），但IE8会被顽固地破坏。

相关问题
最新问题