¿Por qué un gradiente de filtro en un pseudo elemento no funciona en IE8?
Quiero crear botones como estos:
En los navegadores modernos, el efecto se crea utilizando recuadros de sombra y filtros.
Para IE8 - se eligen pseudo-elementos.
Para IE7: uso etiquetas especiales envueltas en comentarios condicionales.
Manifestación: (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>
Pregunta principal: ¿Por qué los filtros no funcionan en pseudo elementos en IE8?
Actualizar:
Supongo que los filtros no funcionan en el contenido generado por css, a pesar del hecho de que no se menciona en estePágina de MSDN.
Resolví mi problema en IE8 aplicando filtros a elementos condicionales como lo hago para IE7.
Demostración 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>
Actualización 2:
Resolví mi problema, pero la pregunta principal sigue sin respuesta:
"¿Por qué los filtros no funcionan en pseudo elementos en IE8?"
Comenzó una recompensa.
Actualización 3: yo creécaso de prueba solo para filtros (y también -ms-filter) en ie8:
Pero los filtros aún no quieren trabajar en pseudo-elementos.
Actualización 4: Yo creo queRespuesta de Scotts es lo mas cercano a la verdad.