De manera general quiero que en el IE 8 me reconozca mis mediaqueries y el css3...
Utilizo 2 Javascripts: Uno es el (prefixfree.min.js) para evitar escribir todo los prefijos de webkit, moz, ms, o y solo escribirlo directo sin todo eso. El CSS3pie para que sea compatible en el Internet Explorer los estilos HTML5.
También utilizo Bootstrap, Fonts de adobe
Pero tengo un problema y se llaman los "iches " mediaqueries... Tengo el siguiente codigo en el head:
Código:
Y en los CSS utilizo el CSSpie<!DOCTYPE HTML> <html> <head> <title></title> <!--MetaDatos Caracteres especiales--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--MetaDatos Bootstrap--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"> <!--CSS Icons Link--> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> <!--CSS BootStrap Links--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <!-- Prefijos desactivados --> <link type="text/css" rel="stylesheet" href="js\prefixfree.min.js"> <!--CSS Locales Links--> <link type="text/css" rel="stylesheet" href="css\estilo.css"> <!--JavaScript Links--> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script> <!--JS Fonts--> <script src="//use.edgefonts.net/shadows-into-light-two.js"></script> <!--MediaQueries en IE--> </head> <body>
Código:
Lo que tengo son imágenes que las convierto en círculos con border-radius.bandera{ width: 90px; height: 90px; position: relative; zoom: 1; border-radius:100%!important; behavior: url(../js/PIE/PIE.htc); }
Ahora bien para utilizar los Mediaqueries ya probé dos: Respond.js (que el Bootstrap me recomienda para ser reconocido) y también el CSS3Mediaqueries.js del Google.
Con CSS3Mediaqueries lo pongo debajo del <!--MediaQueries en IE--> que tengo en el HTML:
Código:
Pero al ingresar a la pagina que se encuentra en el localhost me manda un mensaje de error que dice: "Esta pagina esta intentando el acceso a informacion fuera de su control. Esto presenta un riesgo de seguridad ¿Desea continuar?" pero me bloquea el proceso de IE.<!--MediaQueries en IE--> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
Ahora probando el Respond.js declarandolo como me dice el Bootstrap:
Código:
Con esto si me empieza a reconocer los mediaqueries pero... me deja de reconocer mi HTML5 por ejemplo en la bandera, el border radius hace que mis imagenes regresen a ser cuadrados, apesar de que tenga el CSSpie.<!--MediaQueries en IE--> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]-->
Mi Internet Explorer es: 8 si las condiciones las hago [if It IE 8] no me reconoce las mediaqueries solo el CSS...
Alguien sabe o le ha pasado este problema antes?... Saben como solucionarlo?