Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Internet Explorer

Datos de búsqueda

Etiqueta ‘Internet Explorer’

Detectar la versión de Internet Explorer en Javascript

Fecha de publicación: 2007/12/17

Actualizado 2008-08-28: Actualizado para Internet Explorer 8 (funciona en la beta 2).

Actualizado 2009-03-03: Incompatibilidad con IE6 XP SP3.

Supersencillo:

var ieVer=/*@cc_on function(){ switch(@_jscript_version){ case 1.0:return 3; case 3.0:return 4; case 5.0:return 5; case 5.1:return 5; case 5.5:return 5.5; case 5.6:return 6; case 5.7:return 7; case 5.8:return 8; }}()||@*/0;
if(/MSIE 6.0/i.test(navigator.userAgent)) {ieVer=6;}

/*@cc_on abre el comentario condicional, y @*/ lo cierra. Lo que hay ahí dentro solo lo lee Internet Explorer.

Dentro de la zona de comentario condicional se establece que cada versión de Internet Explorer retorne un número. El 0, que queda fuera del comentario condicional, sirve para el resto de navegadores.

Si por ejemplo queremos que una determinada función funcione solo para Internet Explorer 6 y anteriores se le da una condición de que la ejecute solo para el valor de variable ieVer igual o menor que 6:

if (ieVer<=6) {funcionEjecutada();}

Internet Explorer 6 en XP SP3

En esta configuración Internet Explorer 6 devuelve los mismos valores que Internet Explorer 7, por lo que este script pierde en gran medida su sentido.

De todas formas se puede solventar añadiendo la siguiente línea:

if(/MSIE 6.0/i.test(navigator.userAgent)) {ieVer=6;}

Saber más

Datos del artículo:

Enlaces como bloque en Internet Explorer 6

Fecha de publicación: 2007/10/03

El problema

Tengo unos enlaces dentro de elementos de lista, para un menú de navegación.

Esos enlaces se convierten en bloque mediante CSS, con la propiedad display:block; .

En Firefox, Opera e Internet Explorer 7 el enlace funciona correctamente, aunque no se pase el puntero por encima del texto de enlace.

En Internet Explorer 6 hay que pasar el puntero por encima del texto de enlace, en caso contrario el enlace no se activa.

ul {list-style-type: none; margin:0; padding:0; width:160px;}
ul li {background:#FFFF99; margin-bottom:3px; border-bottom:1px solid #fff;}
ul li a {display:block; padding:4px;}
ul li a:hover {background-color:#FFCC66;}

La solución

Darle una anchura fija al enlace:

ul {list-style-type: none; margin:0; padding:0; width:160px;}
ul li {background:#FFFF99; margin-bottom:3px; border-bottom:1px solid #fff;}
ul li a {display:block; padding:4px;width:160px;width:152px;}
ul li a:hover {background-color:#FFCC66;}

Ejemplo de funcionamiento

Atención: el efecto solo se observará en Internet Explorer 6 y anteriores.

Enlace sin anchura definida

Enlace con anchura definida

Datos del artículo:

Anchura de la página, barra de scroll vertical y fuente de sistema

Fecha de publicación: 2007/08/28

Cuando se crea un sitio siempre se tiene en cuenta una resolución de pantalla mínima (generalmente 800×600 o 1024×768) a la que se verá sin que salga la molesta barra de scroll horizontal. Siempre se hace la página un poco más estrecha que dicha resolución, debido a que hay que tener en cuenta la anchura de la barra de scroll vertical.

Pero cuando la fuente del sistema es más grande de lo habitual esa barra vertical es más ancha, al menos en Internet Explorer 6, y puede salir la barra horizontal, como en este caso:

Captura de pantalla

La solución parece obvia: dejar un poco más de margen para la barra de scroll vertical, haciendo que la página tenga una anchura menor.

Datos del artículo:

CSS: El modelo de caja

Fecha de publicación: 2007/08/11

El modelo de caja se compone de las siguientes propiedades:

  • width: la anchura del elemento.
  • padding: el relleno del elemento.
  • border: el borde del elemento.
  • margin: el margen del elemento.

Y viene a ser algo así:

Modelo de caja en CSS

O así (imagen de Wikipedia):

Modelo de caja

Un ejemplo

Supongamos que tenemos un elemento DIV que deba tener una anchura total de 600 píxeles, un margen respecto a otros elementos de 10 píxeles por sus cuatro lados, un borde de 3 píxeles y un relleno de 20 píxeles.

Al especificar la propiedad width habrá que dar 600px para Internet Explorer 5.5, pero para el resto de navegadores habrá que restar el los rellenos (padding) y los bordes (border): hay que restar a los 600px de ancho los 3px de borde izquierdo, los 20 px de relleno izquierdo, los 20px de relleno derecho y los 3px de borde derecho. Quedarían 554px.

Y la duda que probablemente surja es: ¿como especifico en una misma regla CSS la anchura para IE 5.5 y la anchura para el resto de navegadores? Muy sencillo. Así quedaría la regla CSS:

div {
 width:600px;
 width:554px;
 padding:20px;
 border:3px solid #000000;
 margin:10px;
}

Como se puede observar hay dos anchuras definidas: primero la de IE 5.5, y después la del resto de navegadores con una barra invertida que IE 5.5 no es capaz de leer, pero que si pueden leer el resto, y que deja inutilizada la anchura de IE 5.5.

Para la altura sirve el mismo procedimiento, solo que la barra invertida se posiciona tras el segundo caracter de la propiedad: height.

Esto también se da en el modo chapuzas de IE6 y de IE7.

Actualizado 2007-09-17.

Relacionados

Enlaces externos:

Datos del artículo:

Internet Explorer 6: Duplicación de caracteres

Fecha de publicación: 2007/06/07

Actualizado 2010-06-02: solución del color de fondo.

Hay ocasiones en las que Internet Explorer 6 duplica caracteres. Se trata de un molesto bug que se da, en principio, ante las siguientes condiciones:

  • Que haya dos o más comentarios seguidos.
  • Que el elemento flotado quede a menos de 3px del límite derecho de su contenedor.

Con un solo comentario no ocurre nada, pero con dos o más comentarios seguidos se manifiesta este molesto bug. A mayor cantidad de comentarios, mayor cantidad de caracteres repetidos.

Ejemplo de código para que aparezca el problema descrito:

<div style="float:left">De esta no se repiten</div>

<!-- Ambos comentarios deben incluirse para que salga el fallo -->
<!-- Ambos comentarios deben incluirse para que salga el fallo -->

<div style="float:left; width:100%">
En esta se van a repetir caracteres.
</div>

Y sale algo como esto en IE6 (la última línea es lo que se repite):

repeated characters

s.

Hay dos soluciones:

  • Quitar los comentarios.
  • Meter comentarios condicionales, en lugar de los habituales, que sean ignorados por Internet Explorer, y que el resto de navegadores tratarán como si se tratase de un comentario normal.

Otra posible solución será asignarle al elemento un color de fondo en la CSS.

Un ejemplo del comentario condicional:

<!--[if !IE]>Inserta aquí el comentario<![endif]-->

Saber más

Datos del artículo:

Hacks CSS mediante selectores

Fecha de publicación: 2007/04/13

Esta página está obsoleta y contiene algunas imprecisiones. Ir a nuevo listado de selectores (en inglés).

Para Internet Explorer 6 y anteriores:

* html {}

Solamente Internet Explorer 7

* + html/*/ * /**/ body {}

Internet Explorer 7 y superior:

*:first-child+html {}

Para Internet Explorer 8 y anteriores se usan los dos selectores anteriores:

*:first-child+html {}
* html {}

Solamente Internet Explorer 8:

head/*/+body/**/ {}

Para Internet Explorer 5.5 (y creo que también para el 5), se introduce el siguiente CSS dentro de una regla, de forma que lo que hay a partir de ese fragmento no puede ser leído por IE 5.5 (valida en el W3C CSS Validator):

voice-family: ""}""; voice-family:inherit;

Para el hack de IE 5.5 no hay que usar necesariamente la propiedad CSS voice-family, en principio se puede usar cualquier otra (yo he probado con color y background, entre otras), siempre que no descoyunte nada.

Para navegadores actuales (Firefox, Opera, etc.) e Internet Explorer 7/8:

html>body {}

Solo navegadores actuales (se excluye a Internet Explorer 7 pero no al 8):

html>/**/body {}

Solo navegadores actuales (excluye todos los Internet Explorer):

html>/*/*/body {}

Para Opera 9.2x y anteriores (hasta el 7.2x):

html:first-child {}

Para Safari 2 y 3 y Konqueror (valida CSS3):

html[xmlns*=""] body:last-child {}

Para Safari 3 y otros basados en Webkit (valida CSS3):

body:not(:root:root) {}

Para Opera 9.5, Safari 3 (probado en Safari 3.1 de Windows) y Konqueror 3.5.x:

body:only-of-type {}

Referencias

Actualizaciones

Actualizado 2007-04-21: verificado hack para Konqueror.

Actualizado 2007-05-16: añadido hack para IE 5/5.5.

Actualizado 2007-09-11: añadida explicación de hack para IE 5/5.5.

Actualizado 2008-05-14: añadido hack para Safari 3.

Actualizado 2008-08-05: actualización para Internet Explorer 8 beta 1 y de las versiones para las que sirve el de Opera.

Actualizado 2008-08-07: actualización para Opera 9.5, Safari 3 y Konqueror 3.5.x.

Actualizado 2008-12-02: Se añade el enlace a la tabla de hack css de Unistallme.com.

Actualizado 2009-09-03: Se añade el enlace a css-class.com.

Datos del artículo:

IE Developer toolbar (beta 3)

Fecha de publicación: 2007/01/10

IE Developer Toolbar es una extensión para Internet Explorer, se podría decir que equivalente a la Web Developer Toolbar disponible para Firefox.

IE Developer Toolbar tiene, entre otras, las siguientes características:

  • Exploración y modificación del DOM.
  • Localización y selección de elementos específicos de una página mediante diversas técnicas.
  • Posibilidad de encontrar las reglas CSS utilizadas para definir el aspecto de cada elemento.
  • Desactivación selectiva de determinadas configuraciones del navegador (de Internet Explorer).
  • Visualización del contenido de los atributos class, ID, y otros detalles, como enlaces, teclas de acceso rápido, índice para la tecla tab, o tab-index (el orden en el que se seleccionan enlaces, elementos de formulario, etc. con la tecla tab), de los elementos del HTML.
  • Mostrar con borde capas, tablas u otras etiquetas que se seleccionen.
  • Validación de HTML, CSS, WAI y de feeds RSS.
  • Enlaces directos a la referencia de las especificaciones del W3C, al Internet Explorer team weblog y otros recursos.
  • Mostrar las dimensiones de las imágenes, tamaños de archivos, enlaces y texto alternativos definidos con el atributo alt. En cuanto a la forma de mostrar los enlaces: si son largos no los muestra completos (es una beta, aunque también puede ser por razones de espacio).
  • Redimensionamiento de la ventana del navegador a otra resolución. Ejemplo: si se tiene una resolución de 1280×1024 y se quiere probar un sitio web que se esté diseñando a una resolución de 800×600, la ventana pasa a tener esas medidas, sin tener que ir a las propiedades de pantalla a cambiar la resolución.
  • Desactivar el uso de la cache y los cookies o directamente eliminar ambos, por completo o solo de un dominio dado.
  • Regla para medir elementos de la página.
  • Visualización formateada (con colores) del código HTML y CSS.
  • Herramienta para recoger colores (color picker).
  • Puede ser desagregada de la ventana del navegador.

IE Developer Toolbar beta 3 en Windows 2000

Las características expuestas se basan en las que aparecen en la página de descarga de IE Developer Toolbar (básicamente una traducción con algunos añadidos propios):

  • Explore and modify the document object model (DOM) of a Web page.
  • Locate and select specific elements on a Web page through a variety of techniques.
  • Selectively disable Internet Explorer settings.
  • View HTML object class names, ID’s, and details such as link paths, tab index values, and access keys.
  • Outline tables, table cells, images, or selected tags.
  • Validate HTML, CSS, WAI, and RSS Web feed links.
  • Display image dimensions, file sizes, path information, and alternate (ALT) text.
  • Immediately resize the browser window to a new resolution.
  • Selectively clear the browser cache and saved cookies. Choose from all objects or those associated with a given domain.
  • Choose direct links to W3C specification references, the Internet Explorer team weblog (blog), and other resources.
  • Display a fully featured design ruler to help accurately align and measure objects on your pages.
  • Find the style rules used to set specific style values on an element.
  • View the formatted and syntax colored source of HTML and CSS.

Hay que reconocer que en este caso Microsoft ha hecho un buen trabajo (sin demasiada innovación), ya que se podría decir a la altura de la competencia, y es una herramienta realmente útil.

El requisito mínimo es Internet Explorer 6 y Windows 2000.

Descargar IE Developer Toolbar

Datos del artículo:

Como agregar feeds en Internet Explorer 7

Fecha de publicación: 2006/12/11

Muy sencillo. Lo primero es localizar el boton de agregar feeds en Internet Explorer o algun enlace al feed que pueda aparecer en la página (la ubicación de la segunda opción es muy variable):


Agrandar imagen

Una vez localizado el botón, se pincha en él y aparecen varias opciones (en otras ocasiones puede aparecer solo una) con los formatos en los que está disponible el feed (en principio da igual cual se escoja):

El siguiente paso es pinchar en el enlace de “suscribirse al feed”:


Agrandar imagen

Y sale este cuadro de diálogo, en el que simplemente hay que pinchar en el botón de suscribir:

Y ya está. Para acceder al feed no hay más que hacer visible la barra de favoritos y seleccionarlo.


Agrandar imagen

Datos del artículo:

Beta pública de Internet Explorer 7

Fecha de publicación: 2006/02/02

Ya está disponible la segunda beta de Internet Explorer 7, ésta vez de libre descarga.

Sigue teniendo problemillas con CSS: en éste blog da algunos problemas que en la versión anterior no daba (¿Sera que IE va a peor?).

Un par de enlaces para ampliar información:

Tags: , , , .

Datos del artículo:

¿Boicotear Internet Explorer 7?

Fecha de publicación: 2005/08/04

Pues si. Quizá sea lo mejor si queremos que la web avance. ¿Que es Internet Explorer 6? Un navegador con cuatro años de antigüedad (solo se le han hecho mejoras de seguridad) y que ya salió con algún defectillo (no soportaba adecuadamente las imágenes PNG). Además apenas soporta estándares CSS. Y no hablaré de inseguridad, que lo que no pretendo es aburrir.

Otros navegadores, como Firefox, Opera o Konqueror (este tiene algún defectillo, pero sus desarrolladores van haciendo lo que pueden) si soportan CSS medio en condiciones (lo que quiere decir que mucho mejor que MSIE).

Pero MSIE es el más utilizado a pesar de ser el peor. Por ello MSIE 6 ha sido un freno en el avance del diseño web, porque si yo hago una página con muchas características de CSS, me funcionará en los principales navegadores excepto en MSIE. Para que funcione en MSIE habrá que quitarle muchas cracterísticas de CSS. Pero si a esto le añadimos que desde la versión 5.0 (a la que le sucedió la 5.5) MSIE no había avanzado mucho, la antigüedad del navegador pasa a ser mayor: seis (6) años. 6 años en los que el diseño web ha quedado varado, sin poder avanzar.

A quienes nos gusta el diseño web y quienes se dedican a ello profesionalmente nos hacía ilusión el lanzamiento de MSIE 7. Creíamos que soportaría CSS. Y apenas lo han hecho. Han añadido compatibilidad con algunas características CSS y el soporte de PNG. Y ya está. Seguimos igual que antes. Si la tendencia de actualizar MSIE cada tantísimo tiempo sigue así, el diseño web puede quedar varado otros 3 o 4 años más. Si los sumamos a los anteriores (desde 1999): ¿10 años?.

Por ello hay que boicotearlo. No es tan difícil:

Más sobre este tema.

Tags: , , , , , , , , , .

Datos del artículo:

Información del sitio

Outbook está basado en WordPress

Licencia Reconocimiento-NoComercial-CompartirIgual

Feed RSS: