Inicio > CSS > Corregir incompatibilidad CSS con Explorer

Corregir incompatibilidad CSS con Explorer

26 abril 2013

Muchas veces cuando realizamos páginas web se presenta problemas en los navegadores de la serie de Microsoft y no se sabe como solucionarlo, en este caso es obvio ya que esta empresa nunca cumple los estándares que la mayoría de navegadores sí, para solucionar este problema debemos usar los siguientes tags que he replicado en esta página de los aportes muy importante que hacen nuestros compañeros de la internet:

Incompatibilidad background-image explorer 8

<meta http-equiv=”X-UA-Compatible” content=”IE=9″ />

CSS Gradient Background Creador

/ * Nota: Este gradiente puede hacer de manera diferente en los navegadores que no soportan la sintaxis gradiente sin prefijo * /
/ * IE10 Consumer Preview * /

background-image:-ms-lineal de gradiente (
arriba a la izquierda, 
#FFFFFF 0%, #00A3EF 100%
);

/ * Mozilla Firefox * /

background-image:-moz-linear-gradiente (
arriba a la izquierda, 
#FFFFFF 0%, #00A3EF 100%
);

/ * Opera * /

background-image:-o-lineal de gradiente ( 
arriba a la izquierda, 
#FFFFFF 0%, 
#00A3EF 100% );

/ * Webkit (Safari / Chrome 10) * /

background-image:-webkit-degradado (
lineal, de arriba, 
de abajo, 
color-stop right left (0, #FFFFFF), 
color-stop (1, #00A3EF)
);

/ * Webkit (Chrome 11 +) * /

background-image:-webkit-lineal de gradiente (
arriba a la izquierda, 
#FFFFFF 0%, 
#00A3EF 100%
);

/ * W3C de marcado, IE10 Release Preview * /

background-image: gradiente lineal (
de abajo a la derecha, 
#FFFFFF 0%, 
#00A3EF 100%
);

Para ver la ejecución puede usar jscolor

(un selector de color JavaScript desarrollado por Jan Odvarko ).

Componente que hace que el navegador funcione con los estándares:

Acerca de

IE7.js es una librería de JavaScript para que Microsoft Internet Explorer se comporta como un navegador compatible con los estándares. Se corrige muchos problemas de HTML y CSS y hace trabajo PNG transparentes correctamente bajo IE5 y IE6.

Estado

Versión actual: 2.1 beta4.

Uso

IE7.js

Actualiza MSIE5.5-6 para que sea compatible con MSIE7.

<- [If lt IE 7]> 
Messenger src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"> 
</ script> 
! <[endif ] ->
IE8.js

Actualiza MSIE5.5-7 para que sea compatible con MSIE8.

<- [If lt IE 8]> 
Messenger src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"> 
</ script> 
! <[endif ] ->

No es necesario incluir IE7.js si utiliza IE8.js

IE9.js

Actualiza MSIE5.5-8 para que sea compatible con navegadores modernos.

<- [If lt IE 9]> 
Messenger src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"> 
</ script> 
! <[endif ] ->

No es necesario incluir IE7/IE8.js si utiliza IE9.js

PNG

El guión sólo corrige imágenes con nombre: *-trans.png

Si desea que la solución se aplique a todas las imágenes PNG a continuación, establecer una variable global de la siguiente manera:

var IE7_PNG_SUFFIX =  "png". ;

Debe establecer esta variable antes de incluir el guión IE7.js. Como alternativa, puede establecer la variable en el interior del elemento script IE7.js:

<Guión  src = "IE8.js" > IE7_PNG_SUFFIX = "png". ; </ script>

El sufijo ignorará los parámetros de cadena de consulta. Para un control más preciso, también puede establecer IE7_PNG_SUFFIX a un objeto RegExp. Si desea utilizar una solución PNG alternativa a continuación, establecer el sufijo a algo que no es posible que coincida con:

var IE7_PNG_SUFFIX =  ":" ;

Por defecto, el PNG se estira (esto simula mosaico). Si desea desactivar esta opción y luego establecer la no-repetición de la propiedad de la siguiente manera:

div . ejemplo { 
  background : url ( mi - trans . png )  no - repetición ; 
}

Por desgracia, la imagen de fondo transparente no puede ser de azulejos (repetido) con background-repeat . Tampoco puede ser colocado conbackground-position .

Descargar

Puede acceder directamente a estos archivos si lo desea:

http://ie7-js.googlecode.com/svn/version/

O vaya a la sección de descargas para descargar la versión actual.

Introducción

Aquí es una buena introducción:

http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html

Manifestación

http://ie7-js.googlecode.com/svn/test/index.html

Tomado de:

http://www.forosdelweb.com

http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/

https://code.google.com/p/ie7-js/

Categorías:CSS
A %d blogueros les gusta esto: