asp.net - questions - jquery cycle IE7 problema png transparente

html and css design and build websites pdf

Question

Tengo problemas para hacer que el ciclo de jquery funcione cuando tengo archivos png transparentes en IE7

Está bien en Firefox y Chrome pero en IE (versión 7) obtengo un color negro donde la transparencia png es durante el fundido.

¿Se puede hacer que esto funcione, verdad?

Answer 1

Internet Explorer 7 tiene algunos problemas con el desvanecimiento de los PNG transparentes. Si ha llegado a esta página porque está viendo un borde negro donde se encuentran los bordes transparentes en su PNG, a continuación le ofrecemos algunos consejos para solucionar el problema:

1. No se descolore el elemento directamente, sino que se desvanece un contenedor principal que contiene el archivo PNG. Esto puede significar que necesita agregar un elemento contenedor a su código.
2. Dale al elemento padre un color de fondo.
3. Por último, si sigues teniendo problemas, intenta darle al elemento principal el antiguo zoom: 1 truco. Dale al elemento padre una declaración de estilo de zoom: 1 (ya sea a través de CSS o un estilo en línea). Esto obligará a IE a dar el elemento hasLayout que tiende a solucionar todo tipo de problemas de visualización extraños en IE.

Fuente: Desvanecimiento de un PNG transparente de 24 bits en IE7 +

Desafortunadamente, esto significa que es imposible que los PNG transparentes se desvanezcan en un fondo transparente, ya que debe aplicar un color de fondo al elemento principal para que la transición se realice sin problemas, es decir, sin los píxeles negros. background: transparent no funcionará (ya que transparent no es realmente un color). :(

Answer 2

1. Define un color de fondo sólido para tu imagen:

.container img { background-color: white; }

1. Defina la propiedad background-image css de su imagen en su atributo src :

$(''.container img'').each(function() { $(this).css(''background-image'', $(this).attr(''src'')); });

Ventaja: no necesita cambiar su marcado

Desventaja: a veces aplicar un color de fondo sólido no es una solución aceptable. Normalmente es para mí.

Answer 3

¡Esto me ha estado volviendo loco durante los últimos días! Finalmente encontré una solución decente que funciona bastante bien.

Agregue esto a su CSS:

img {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */
zoom: 1;
}

Crédito: Dan Tello

Answer 4

Aunque no se limita específicamente al complemento de ciclo, esto puede ayudar a otros. Encontré esta secuencia en mi intento de encontrar una solución para .animate () archivos png transparentes / translúcidos. Tuve el problema de un borde negro en IE7 e IE8. Las imágenes parecen estar bien hasta que intenté usar JQuery para animar la opacidad ...

$(''#my-png-img'').stop().animate({opacity:0.0},3000);

Pasé por varias de las soluciones y, desafortunadamente, ninguna de ellas fue ideal. Si bien este flujo está un poco anticuado, puede ayudar a alguien más a buscar una solución. Terminé usando la solución Twin Helix ( http://www.twinhelix.com/css/iepngfix/ ) con un poco de ajuste. No soy un gran admirador de los archivos .htc, pero eso no viene al caso. Edité el archivo iepngfix.htc (~ línea 75) para interceptar IE7 e IE8. Cambié...

!/MSIE (5/.5|6)/.test(navigator.userAgent) ||

a

!/MSIE (5/.5|6|7|8)/.test(navigator.userAgent) ||

A partir de ahí seguí las instrucciones generales (ver demostración) incluyendo agregar este bit a mi CSS

/* IE PNG Fix */
img, div, a, input {
behavior: url(/_css/iepngfix.htc)
}

Además y como otros han mencionado, tuve que anidar mi imagen en un contenedor ...

<div id="img-container"><img src="/images/my_semi_trans_png24.png" /></div>

Luego apliqué el efecto .animate () al div que contiene. Un poco restrictivo, sin embargo, esta fue la única forma en que pude desvanecerme para trabajar consistentemente. En un caso, incluso encontré que el problema de transparencia afectaba la animación de la opacidad en un archivo .gif transparente. Ah, y si utilicé .fadeIn () /. FadeOut en lugar de .animate () no hizo ninguna diferencia.

Answer 5

Encontré la solución a este error, simplemente agregue lo siguiente al div de envoltura y al img y otros elementos (p. Ej., H1, h2, p)

#div, #div img {
background:none !important;
filter:none !important;
}

Esto lo arreglará

Answer 6

Esperando ayudar a alguien más que encuentre este problema:

Tenía fondos .png transparentes (en mosaico) en unos pocos divs en mi página y cuando activé el plugin de ciclo jquery, esas áreas transparentes se torcieron. Perdieron algo de su transparencia.

Mi solución fue simplemente hacer las fichas mucho más grandes, por lo que realmente no hay mosaico en absoluto. Hay una pequeña compensación para el tamaño del archivo, pero solucionó el problema.

Answer 7

Esto es todo cosas bastante agitadas que te piden que hagas. Todo código codingsky.

Aquí está mi sugerencia. IE no permitirá que un fondo png sobre un fondo de color viva en paz, así que ...

 <div style="background:url(''something.png'') no-repeat 0 0 scroll; position:absolute; z-index:2;">&nbsp;</div>
<div style="background-color:#fa0237; position:absolute; z-index:1;">&nbsp;</div>

Observe que el primer div es z-index 2 (en la parte superior de 2nd div).

Esto se puede simplificar poniendo tu bgColor en el fondo css en la 1ra Div y eliminando el segundo div. Esto resuelve el problema de las áreas negras. Yo tuve este problema yo mismo.

La única forma en que puedo ver que tienes un problema donde no puedes usar este método es cuando tienes la necesidad de superponer dos imágenes de fondo png una encima de la otra y desvanecerse simultáneamente. No hagas eso. Tendrá que animar cada uno después del otro.

Answer 8

Esto me volvió loco durante un par de días y finalmente me topé con la solución PNG de Unit. http://labs.unitinteractive.com/unitpngfix.php - ¡funciona con Cycle y me impidió cambiar a una solución JPEG!

Se necesita retocar un poco los PNG específicos en el ciclo div, ¡pero ella trabaja!

Answer 9

Estoy cargando algunos PNG dinámicamente en el DOM ... esto funcionó para mí: http://www.twinhelix.com/css/iepngfix/

Answer 10

Junto con la táctica "ajustar la imagen en un div / fade the div" mencionada anteriormente, el uso de esta línea de CSS solucionará el problema de IE:

#div img { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src=''../images/bubble_intro_ph1.png''); }

Answer 11

La mejor solución es http://labs.unitinteractive.com/unitpngfix.php .

Inclúyalo en su script y asegúrese de proporcionar la ruta a su gif transparente de 1px por 1px. Voila!

Answer 12

La solución más confiable es no usar pngs en animaciones de estilo de desvanecimiento en <IE9 navegadores <IE9 .

Probé casi todas las "correcciones" y variaciones de una solución disponible que pude encontrar para este problema y no tuve éxito. La solución que utilicé fue exportar pngs que iban a tener animaciones de estilo de desvanecimiento aplicadas a ellos (es decir, fadeIn / fadeOut) a gifs y hacer un reemplazo condicional para <IE9 . Aunque los gifs no se ven tan bien como los png en un navegador moderno, se ven muchísimo mejor que la forma en que IE8 y anteriores hacen pngs, y este método funciona de manera confiable. Todavía puedes mostrar buenos pngs para navegadores capaces y cuando se aplica la corrección nada se rompe; la mayoría de los png piratas se sabe que rompen otras propiedades CSS. Tu código podría verse más o menos así:

$(document).ready(function ()
{
if ($.browser.msie && parseInt($.browser.version, 10) < 9)
{
$(".myClass, .myOtherClass").each(function (val)
{
var backgroundValue = val.css("background-image");
backgroundValue.replace(''.png'', ''.gif'');
$(this).css("background-image", backgroundValue);
//you could just as easily do this with ''img'' tags
});
}
}

Answer 13

Ok, entonces tomé la sugerencia de Darko Z sobre el div. Al final, esto es lo que tuve que hacer para poder hacer que jQuery Cycler Fadeing FX trabajara en IE con drupal 7. En lugar de colocar una etiqueta, utilicé divs y apliqué the.png al fondo de la imagen junto con

Así que cambié esto:

<div class="fademe">
<a href="http://mysite/node/1">
<img class="firstTAB-phase2" src="http://mysite/IMG/bio_640x330.png" height="330px" width="640px" />
</a>

a esto:

<a href="http://mysite/node/1">
<div class="fademe" id="TAB1"></div>
</a>

luego en el CSS lo hice:

.fademe{ width:640px; height:330px;}
#TAB1{ background: #999 url(http://mysite/IMG/bio_640x330.png) no-repeat;}

y funciona por ahora = D.

Espero que ayude, Defigo

Answer 14

Para mí, funcionó simplemente incluir la propiedad del filtro con valor en blanco en la función .animate () de jQuery

Quizás esto también funcione para ti.

$("#btn").animate({opacity:1,"margin-left":"-25px", filter:''''});

Answer 15

Para resolver este problema simplemente agregue:

"filtro": ""

a .css () o .animate () y solucionará una serie de problemas relacionados con IE.

Answer 16

Prueba agregar

cleartype: true, cleartypeNoBg: true

a tu ciclo jquery arugments. Debería estar bien ahora :)

Answer 17

Reescribí los métodos fadeIn y fadeOut. Parece que no obtengo el color negro en la imagen PNG. No se necesita div padre. Todavía usas como jQuery.

http://www.pagecolumn.com/javascript/fade.htm

Answer 18

Si puede permitirse sacrificar algo de calidad de imagen, puede guardar las imágenes como PNG-8 en lugar de PNG-24, luego aplicar la solución mencionada por Prosini, es decir,

cleartype: true, cleartypeNoBg: true

y eso debería funcionar Con PNG-24, todavía estaba recibiendo un poco de borde negro durante las transiciones.

Answer 19

También estoy usando la solución de Weezy pero no juego bien con IE7. Los efectos son aún peores.

Al asignar jQuery opacity-property a animate-function en lugar de Black-Border-Bug genera un Black & White-Border-Bug :-P Así que hice lo siguiente para IE8;

En la cabecera IE8 comentario condicional con el comportamiento de HTC en la clase .fixpng especialmente para htc.

<!--[if IE 8]>
<style type="text/css">
.fixpng {
/* this fixes transparency in IE8 ONLY! */
behavior: url(css/IE8pngfix.htc);
}
</style>
<![endif]-->

cambiado el archivo HTC a IE8pngfix.htc. Se cambió la línea 75 en el .htc a

! / MSIE (8) /. Test (navigator.userAgent

En realidad está doblemente filtrado, primero IE condicional y luego en htc, pero ¡qué diablos!

Lo encontré porque htc podría interferir con jQuery. Ejemplo;

[div id="tooltip" class="fixpng"]

Tuvo que cambiar $ (div # tooltip) .css ({opacity: 0}) para mostrar: none en CSS y establecer display: ''block'' en hover-event.

Entonces, si alguien ha encontrado una solución funcional para IE7, estaría muy feliz. Todas las soluciones provisionales / piratas de arriba no funcionan para mí. Acerca de IE6 no me importa en ningún momento.

Answer 20

Tengo la mejor solución para este maldito IE-PNG-BlackBorderProblem cuando uso desvanecimiento u otros efectos jQuery. Está funcionando en todos los IE> 6 incluso en IE8 !:

1. Descargue el pngFix de jQuery en: http://jquery.andreaseberhard.de/pngFix/

2. Modifique este script buscando: if (jQuery.browser.msie && (ie55 || ie6)) { y reemplácelo con: if (jQuery.browser.msie) {

3. crea un blank.gif (1x1 gif transparente)

4. poner un: .pngFix( {blankgif: ''< relative location to the blank.gif >''} ); al final de la línea donde realizas jQuery efectos ej. $(''#LOGO'').animate( {''top'': ''40%'', ''opacity'': ''1.0''}, 2500 ).pngFix( {blankgif: ''./library/img/blank.gif''} );

5. asegúrese de que todas las imágenes se hayan cargado antes de usar los efectos jQuery dentro de su función lista para documentos utilizando el evento .load en la ventana DOM-Element:

   $(document).ready( function() {
$(window).load( function() {
$(''#LOGO'').animate( {''top'': ''40%'', ''opacity'': ''1.0''}, 2500).pngFix( {blankgif: ''./library/img/blank.gif''} );
});
});

6. Cargue la página en IE8 y siéntase feliz ;-)

7. Puedes verlo en acción en http://www.claudworks.net

No hay bordes oscuros feos alrededor de algunos PNG animados en IE.

Answer 21

Tuve este problema con Drupal Views Slideshow usando la transición de Fade en PNG transparentes.

Me encontré con la siguiente cuasi solución totalmente por casualidad. No sé por qué funciona, pero el inconveniente es que básicamente elimina el sobre de fundido cruzado en IE (no parece afectar visiblemente a FF o Safari):

Views Slideshow imprimirá algo como lo siguiente como parte de su resultado:

<div class="views-field-field-photo-fid">
<span class="field-content"><img height="433" width="834" src="http://devel.acupuncture2.polishyourimage.com/sites/acupuncture2.polishyourimage.com/files/pain_splash.png?1292552784" alt="" class="imagefield imagefield-field_photo"></span>
</div>

Yo escondí views-field-field-photo-fid:

.views-field-field-photo-fid { width: 0px; }

No es perfecto, pero tal vez lo suficientemente bueno hasta que encuentre una mejor solución. Puede echar un vistazo al sitio de desarrollo: http://acupuncture2.polishyourimage.com/

Answer 22

desafortunadamente, aunque IE7 admite PNG transparente, solo se puede aplicar un filtro a un elemento a la vez.

Lo que está sucediendo en su aplicación es que IE7 está aplicando el filtro alfa a su PNG, y luego jQuery le solicita que aplique otro filtro alfa para el fundido. Esto tiene resultados visibles como dijiste.

La forma de evitar esto es anidar su PNG dentro de un contenedor y luego desvanecer el contenedor. Más o menos así:

<div id="fadeMe">
<img src="transparent.png" alt="" />
</div>

Otra forma de evitar esto es este simple complemento jQuery que utilicé porque no pude cambiar la estructura. Daría la atribución pero sinceramente no puedo recordar dónde lo encontré.

/* IE PNG fix multiple filters */
(function ($) {
if (!$) return;
$.fn.extend({
fixPNG: function(sizingMethod, forceBG) {
if (!($.browser.msie)) return this;
var emptyimg = "empty.gif"; //Path to empty 1x1px GIF goes here
sizingMethod = sizingMethod || "scale"; //sizingMethod, defaults to scale (matches image dimensions)
this.each(function() {
var isImg = (forceBG) ? false : jQuery.nodeName(this, "img"),
imgname = (isImg) ? this.src : this.currentStyle.backgroundImage,
src = (isImg) ? imgname : imgname.substring(5,imgname.length-2);
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=''" + src + "'', sizingMethod=''" + sizingMethod + "'')";
if (isImg) this.src = emptyimg;
else this.style.backgroundImage = "url(" + emptyimg + ")";
});
return this;
}
});
})(jQuery);

NOTA Originalmente, el complemento se escribió para corregir la transparencia PNG en IE6 pero lo modifiqué para que funcione con su problema en IE6 +.

Sidenote: No puedo recordar de memoria, pero creo que IE8 puede tener el mismo problema. Corrígeme si estoy equivocado :)

Answer 23

¡La solución de Weezy funcionó para mí!

Ajusté más el archivo .htc y cambié esta línea:

var bgPNG = bgSrc.match(/url[("'']+(.*/.png[^/)"'']*)[/)"'']/i);

a:

var bgPNG = bgSrc.match(/url[("'']+(.*/.fixme.png[^/)"'']*)[/)"'']/i);

Al hacer esto, el script .htc ignorará todos los archivos .png a menos que terminen con .fixme.png (por ejemplo, "transparant.fixme.png"). Tuve la intención de acelerar un poco el script y asegurarme de que solo se solucionen los problemas de .png (los que debes tener traspante).

Utilizo otros .png que no son transparentes, y por lo tanto no necesito este script para ejecutarlos.