Los marcadores de lista no se muestran en Internet Explorer 7

Internet Explorer 7 (IE7) es una plataforma de un desafío para los desarrolladores web, ya que es lento para adoptar nuevas normas y estricto en su adhesión a esas normas. Los diseñadores que se utilizan para la intuición de otros navegadores como Firefox u Opera pueden ser frustrados por los problemas planteados por algunas de las funciones inherentes de IE al probar las páginas web. El concepto de "diseño" en el IE se desencadena a menudo por sus propiedades de estilo en cascada. Los marcadores de lista y balas tienen una tendencia a desaparecer si se aplica IE "hasLayout" al elemento, pero hay maneras de combatir este problema que funciona en todos los navegadores.

¿Qué es "hasLayout"?

Cada navegador tiene sus propios medios de cálculo de HTML y estilos de una página web para determinar la forma en que se debe mostrar. "Diseño" es un tal función en IE, que evalúa las etiquetas específicas y luego los lleva a cabo en relación con otros elementos de la página. Cuando se trate de elementos de la lista, esto generalmente significa la creación de un cuadro alrededor de la lista. Cuando los estilos de lógica y por defecto del navegador "hasLayout" se aplican a la caja donde su hoja de estilo contiene ninguna forma de prevención, los marcadores de la lista serán cortados por el borde de la caja, haciendo que se "desaparecen".

Los desencadenantes comunes

La "flotación" es una de las propiedades que causa el IE para aplicar "hasLayout" a un elemento, que a su vez añadir un "display: block" propiedad de estilo de la lista de forma automática, incluso si usted no tiene un estilo explícito añadido a sus hojas de estilo. Los elementos de bloque no se muestran los estilos de lista por defecto, por lo que hasta que restablezca ya sea el flotador o la propiedad de presentación, no aparecerán sus marcadores.

Correcciones de compatibilidad

Una solución rápida, si se quiere mantener intacta su propiedad float, es añadir una: la propiedad "display inline" a su estilo de elemento de la lista. El valor en línea pueden no funcionar en las listas ordenadas, en cuyo caso el flotador se debe retirar o ajustados a "None". Por ejemplo:

ul li {
flotador izquierdo;
anchura: 50%;
line-height: 36px;
list-style-image: url (images / icon.png);
display: inline;
}

{ol
list-style-type: none;
float: none;
}

ol li {
line-height: 36px;
list-style-image: url (images / icon.png);
margin-left: 20px;
}

Definición de anchuras o alturas, el establecimiento de un "desbordamiento" o "zoom" y con el "position: absolute" propiedad también causa problemas. Para superarlos, debe "reset" al menos una de las características del problema a un valor predeterminado. Por ejemplo, la altura o el ancho establecido en "Auto", flotar a "ninguno" o desbordamiento en "visible".

Propiedades soportadas

Internet Explorer 7 y versiones anteriores sólo contienen soporte parcial para toda la gama de tipos de lista de estilos disponibles en el CSS. Si utiliza un valor de propiedad que no es compatible, aparecerá nada. Como se ha descrito en referencia CSS de sitepoint, "Internet Explorer para las versiones de Windows hasta e incluyendo 7 no son compatibles 'armenio' ', líder de cero decimal' los valores," georgiano "o" inferior-griego. Ni admiten los valores 'inferior-latino "o" superior-latino,' a pesar de que sí apoyan las formas alternativas de 'inferior-alfa "y" alfa superior.' "

Utilización de imágenes como marcadores

Si bien no es una solución infalible para los marcadores de Internet Explorer 7, debido a la cuestión "hasLayout" faltante, asignar una imagen como de tipo estilo de lista o de fondo elemento de la lista es un medio alternativo de mostrar marcadores sin tener que preocuparse acerca de los estilos de lista compatibles. Sin embargo, se aplican las mismas reglas con respecto a los flotadores y los bloques. Las imágenes pueden ser utilizados en una de dos maneras, ya sea en el nivel superior utilizando "list-style", o el nivel de lista elemento utilizando "fondo". Por ejemplo:

ul {list-style: url ( "images / bullet.gif") no-repeat; }

O:

ul {-style-type lista: ninguno; }
li {background-image: url ( "images / bullet.gif") no-repeat; }