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/)
<code>/** * 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; }</code>
<code><!-- 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></code>
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/)
<code>/** * 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; }</code>
<code><!-- 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></code>
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.