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

Question

我想创建这样的按钮：

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

演示： (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 中没有提到它。

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

最终演示： (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：

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

更新 4： 我认为Scotts answer 最接近真相。

Answer 1

问题是“为什么过滤器对 IE8 中的伪元素不起作用？”以下是我所能收集到的最接近明确的答案。它来自this page上的信息。

gradient 过滤器是一个“程序表面”（与alphaimageloader 一起）。程序表面是这样定义的：

程序表面是显示在 对象的内容和对象的背景。

仔细阅读。它本质上是您可以在对象的内容和该对象的背景之间说的另一个“层”。你看到问题的答案了吗？ :before 和 :after 创建的内容...是的！ 内容。具体为MSDN notes：

::before 和 ::after 伪元素指定 文档树中元素之前和之后的内容。内容 属性与这些伪元素一起指定什么 已插入。

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

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

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

Answer 2

-ms-filter 上的文档-filter 的同义词-指出：

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

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

所以我会说它既不是真的也不是假的。相反，它可能是未定义。我在同一文档中提到了该属性的来源：

对象.currentStyle.hasLayout

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

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

因此，可能的结论是生成的内容不是对象，因此它没有currentStyle 属性，因此也没有' t 将 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 在 cmets 中提到的：querySelectorAll cannot access pseudo-elements。

---

在this msdn introduction on filters 中可以找到filter 对伪元素不起作用的另一个提示（虽然-再次-只不过是一个提示），说明（强调我的）：

过滤器通过过滤器属性应用于HTML控件

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

Answer 3

与其使用 IE 的 filter 样式，您是否考虑过使用 CSS3Pie？

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

Answer 4

我已经给出了我喜欢的解决方案（使用 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 版本的整个thin 周围添加引号的原因。

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

Answer 5

哇，这太难了。

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 被顽固地破坏了。