Por que um gradiente de filtro em um pseudoelemento não funciona no IE8?
Eu quero criar botões como estes:
Nos navegadores modernos, o efeito é criado usando sombra e filtros inseridos na caixa.
Para o IE8 - pseudo-elementos são escolhidos.
Para o IE7 - eu uso tags especiais envolvidas em comentários condicionais.
Demonstração: (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>
Questão Principal: Por que os filtros não funcionam em pseudo-elementos no IE8?
Atualizar:
Eu acho que os filtros não funcionam em conteúdo gerado por CSS, apesar do fato de que não é mencionado nestePágina do MSDN.
Eu resolvi meu problema no IE8 aplicando filtros a elementos condicionais como o IE7.
Demonstração final: (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>
Atualização 2:
Eu resolvi meu problema, mas a questão principal ainda não foi respondida:
“Por que os filtros não funcionam em pseudo-elementos no IE8?”
Começou uma recompensa.
Atualização 3: eu crieicaso de teste somente para filtros (e também -ms-filter) no ie8:
Mas os filtros ainda não querem trabalhar em pseudo-elementos.
Atualização 4: eu acho queScotts answer está mais próximo da verdade.