I want to create buttons like these:
在现代浏览器中，效果是使用插入框阴影和滤镜创建的。
对于 IE8 - 选择伪元素。
对于 IE7 - 我使用包含在条件注释中的特殊标签。
Demo: (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 中的伪元素？
Update:
我猜想过滤器不适用于 css 生成的内容，尽管事实上这里没有提到它MSDN 页面.
我通过对条件元素应用过滤器解决了 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：我创建testcase仅适用于 ie8 上的过滤器（以及 -ms-filter）：
但过滤器仍然不想在伪元素上工作。
更新4：我认为斯科茨的回答最接近真相。
问题是“为什么过滤器不能在 IE8 中的伪元素上工作？”以下是我所能找到的最接近明确的答案。它来自于以下信息这一页.
The gradient过滤器是一个“程序表面”（以及alphaimageloader）。程序表面定义如下：
程序表面是显示在程序表面之间的彩色表面 对象的内容和对象的背景。
请仔细阅读。您可能会说，它本质上是对象的内容和该对象的背景之间的另一个“层”。你看到问题的答案了吗？创建者是什么:before and :after... 是的！Content。具体如MSDN 注释:
::before 和 ::after 伪元素指定 文档树中元素之前和之后的内容。内容 属性与这些伪元素一起指定什么 已插入。
生成的内容与其他盒子交互，就像它们是真实的一样 元素插入到其关联元素的内部。
现在，如果是content生成了，那么就是not包含内容的“对象”，但是内容本身（它恰好有一些类似于可能包含内容的元素对象的行为）。
因此，不存在“对象”含有“内容”（因为它is内容），其中filter可以为伪元素（即“假元素”）生成的内容放置一个程序表面。 Agradient必须应用于object，然后将程序表面放置在它和内容之间。