Lista de etiqueta UL, OL, DL: problemas de compatibilidad para diferentes navegadores

Introducción a los artículos de producción de la página web: investigación y aplicación de los elementos de la lista CSS HTML UL, OL, DL.

Los elementos de la lista HTML (como OL, UL, DL) se utilizan ampliamente en el desarrollo y la producción actuales de sitios web, pero sus temperaturas son diferentes en diferentes navegadores. Este artículo analiza las características básicas de estos elementos de la lista, varios problemas de compatibilidad en diferentes navegadores e introduce algunas aplicaciones comunes.

Debería ser útil para principiantes o aquellos que tienen algo de experiencia en CSS.

Las listas desordenadas son las listas más utilizadas. La siguiente figura muestra la visualización de listas desordenadas en diferentes navegadores:

página de demostración

Como se muestra arriba, la configuración predeterminada de listas desordenadas en diferentes navegadores es ligeramente diferente. Por supuesto, hay pocas listas desordenadas que no se modifican en los proyectos de sitios web reales hoy. Una de las razones es el reinicio de CSS, que ha eliminado las balas, márgenes o acolchados de la lista predeterminada para listas desordenadas.

Algunas propiedades específicas de CSS de las listas desordenadas son de tipo lista, posición de estilo de lista y imagen de estilo de lista. Estas propiedades establecen el tipo de balas de lista, la ubicación de la etiqueta y el uso de imágenes en lugar de etiquetas. Estas tres propiedades se pueden fusionar con el estilo de lista.

El atributo de tipo list de estilo se puede establecer en algunos valores diferentes. El siguiente cuadro muestra el efecto de página de algunos valores:

Dependiendo del navegador y el sistema operativo del usuario, algunos valores de elemento de estilo de lista pueden no mostrarse correctamente, y generalmente vale la pena a los valores decimales. No se recomienda utilizar una lista innecesaria para incrementar el valor, porque la semántica de la lista no ordenada ya no existe.

La posición de estilo de lista se puede configurar en el exterior (predeterminado) o adentro para la posición de la etiqueta de lista. Si se establece la imagen de estilo List, también afectará la ubicación de la imagen.

El atributo de imagen de estilo de lista puede brindar a las listas desordenadas un rendimiento único personalizado. Desafortunadamente, usar este método para agregar números de proyecto en IE es muchos errores, por lo que rara vez se usa. Una mejor solución es agregar una imagen de fondo al elemento LI de la lista y ajustar la ubicación de la imagen de fondo en consecuencia y establecer sin repetición. En maxdesign.com, este método se ha demostrado a través de explicaciones paso a paso y funciona bien en todos los navegadores.

Las listas ordenadas se utilizan cuando se requiere un valor incremental frente a cada elemento de lista del elemento de la lista (por ejemplo, 1, 2, 3, etc.). El tipo de lista de tipos de lista de una lista ordenada se puede establecer en cualquier valor que se pueda establecer en una lista desordenada. En la mayoría de los casos, una lista ordenada está precedida por un valor incremental o no está precedida por ninguna marca. No se recomienda utilizar listas ordenadas para lograr un comportamiento similar a las listas desordenadas. Debido a esto, la semántica de la lista ordenada ya no es correcta.

La lista de definición se utiliza para marcar los elementos de la lista definidos, que incluyen el título de definición (DT) y la definición misma (DD). No es necesario que coincida exactamente al definir un elemento de lista, el siguiente código es completamente legal en Strict XHTML:

<dl> <dt> Música inalámbrica Miguhui </dt> <dt> Conferencia Copenhagen </dt> <dd> "Octubre Siege" </dd> </dl>

De esta manera, puede usar múltiples DT en un solo DD, o múltiples DD en un solo DT.

Defina la visualización visual de la lista. Por defecto, la visualización de cada navegador es casi la misma que se muestra en la figura a continuación:

página de demostración

El código HTML correspondiente a la imagen de arriba es el siguiente:

<dl> <dt> título </dt> <dd> Aquí está la definición </dd> </dl> <dl> <dt> películas populares </dt> <dd> octubre Siege </dd> <dd> taoling </dd> <dd> tres pistol Tema </dt> <dd> mercado de valores </dd> <dd> precios de la vivienda </dd> <dd> día de año nuevo </dd> <dd> tumba de Cao Cao </dd> </dl> 4. Lista obsoleta: menú y directora

<menú> y <dir> elementos, técnicamente, también se pueden llamar listas HTML, pero están desactualizados en XHTML, por lo que no se discuten en detalle aquí.

En HTML, la lista desordenada sigue siendo esencialmente la misma, aunque parece que ahora se llama simplemente una lista, y se utilizarán nuevos elementos para envolver la lista como una navegación.

El elemento OL tiene un ligero cambio y obtiene dos nuevas propiedades: invertido, que es un valor booleano para indicar si la lista aumenta o disminuye; Comience, que es un entero para declarar el punto de partida de la lista ordenada.

Además, se agregarán los elementos <figura> y <ettall>, y tendrán elementos infantiles, incluidos los elementos <dt> y <dd>.

Para obtener más información sobre HTML5, consulte este artículo sobre el revelador HTML5 y CSS3 de Taobao Kongyan y CSS3 [Baibiao Milk Tea Gang]. Además, también puede hacer clic aquí para ver el PPT en línea.

Las siguientes son algunas diferencias comunes y obvias del navegador.

Bajo Internet Explorer 8, Opera 9, Chrome, Firefox 2 y 3 y Safari, agregando pantalla: Bloque hará que el número de elementos de LI en una lista ordenada o desordenada desaparezca.

Pero bajo IE6 e IE7, agregando la pantalla: Bloque Bullet todavía existe:

página de demostración

En IE6 e IE7, agregando flotador: los elementos de izquierda a la lista (ningún otro estilos) hará que los elementos de la lista se alineen horizontalmente mientras las balas (o el número de elemento) desaparecen. Como se muestra en la figura a continuación, se corta del navegador IE7

Bajo IE8 y todos los demás navegadores, los elementos de la lista están alineados horizontalmente, pero las balas (o números de proyecto) aún son visibles.

página de demostración

Cuando el elemento de la lista flote, debemos recordar otro punto clave, es decir, el contenedor de la lista (elemento UL) morirá cuando solo hay elementos flotantes en el interior. Esto sucederá de la misma manera en todos los navegadores. Agregar desbordamiento: Hidden es una de las soluciones a este problema.

Para lograr aproximadamente el mismo flotador: efecto izquierdo en diferentes navegadores, la mejor manera es usar la pantalla: en línea.

En IE6 e IE7, si el elemento de la lista en la lista ordenada tiene un diseño, el valor de la lista ordenada no aumentará y se mostrará como 1, como se muestra en la figura a continuación:

página de demostración

La propiedad HaslayOut no se puede configurar directamente, pero si un elemento tiene un ancho, altura, flotación, posicionamiento absoluto, esperar cambiará a Hastaut.

En la mayoría de los navegadores, para eliminar las balas o los números de proyecto y alinear el lado izquierdo del contenido, debe establecer el relleno izquierdo en 0, pero esto no funciona en IE6 e IE7. En IE6 y 7, debe establecer el margen izquierdo en 0 y reemplazarlo. Vea la imagen a continuación:

página de demostración

Para evitar problemas al manejar estilos de lista bajo diferentes navegadores, la mejor manera es usar el reinicio CSS mencionado anteriormente. El reinicio CSS puede establecer casi todas las diferencias de configuración predeterminadas en el navegador y permitir que todos los navegadores funcionen sobre la misma base. Aunque todavía hay diferencias en algunos estilos, no serán tratados como un punto difícil.

Además, como se mencionó anteriormente, es mejor evitar el uso de la propiedad de imagen de estilo de lista por completo y, en su lugar, establecer antecedentes en su lugar, una solución simbólica personalizada para listas sin ordenar fáciles de mantenimiento y fácil de mantener.

Con mucho, el uso más común de las listas desordenadas son las barras de navegación, ya sea horizontal o vertical. Dado que los diseños basados ​​en la mesa se han vuelto obsoletos, las listas desordenadas se han utilizado ampliamente como base para los elementos de navegación, por las siguientes razones:

• Las listas desordenadas pertenecen a elementos de nivel de bloque y no necesitan envolver un DIV afuera para aplicar fondo u otras extensiones gráficas.

• Cuando el estilo está deshabilitado, el estilo de la lista estará degradado con calma, manteniendo su estilo original, lo que puede garantizar que los elementos de navegación sean diferentes de otros contenidos en la página.

• Aunque una lista desordenada no es solo una lista simple, agregando elementos como etiquetas <a>, los elementos adicionales <li> harán que la barra de navegación se exprese en una forma más flexible.

• La navegación se divide en listas y/o sublistas, lo que permite el uso de tecnologías auxiliares (como los lectores de pantalla) que los usuarios pueden omitir fácilmente toda la barra de navegación.

Por ejemplo: el menú de efecto especial de Lavalamp implementado con jQuery

Por ejemplo, un ejemplo de un menú desplegable que hice hace algún tiempo: JQuery usa Slidetoggle para implementar el menú desplegable Vertical

Demostración de efecto

HTML List Tag UL, Li proporciona una forma efectiva de mostrar una lista de fotos por las mismas razones que se mencionan anteriormente en la barra de navegación. A continuación se presentan algunas galerías de fotos o componentes de visualización de fotos basados ​​en etiquetas HTML.

jarusel

JCAROUSEL Photo Switching Transmission JQuery Plug-in ofrece funciones jQuery personalizables, utilizando listas desordenadas, y puede mostrar efectos de transmisión de muchas maneras diferentes. He traducido este complemento al chino, puedes hacer clic aquí con dureza: Jcarusel China Demo Home Page

Innerfade - jQuery

El complemento InnerFade puede habilitar cualquier contenido de forma de lista para desvanecerse para cambiar la pantalla, o para cambiar la pantalla hacia arriba y hacia abajo. El contenido puede ser texto, imágenes, etc. admite varias etiquetas, etiquetas de lista, etiquetas UL, Li, DIV y P.

Puede realizar fácilmente la visualización automática de conmutación aleatoria de noticias o contenido de anuncio, o visualización de reproducción de presentaciones de diapositivas de imágenes, etc. La siguiente figura muestra la fase de transición de la conmutación de diapositivas de imagen:

Esta demostración de complemento es difícil de hacer clic aquí: Página de demostración de InnerFade

Muchos blogs y sitios web de tutoriales contienen un código de resaltamiento de JavaScript que convierten los elementos previos o los elementos TextARea en listas ordenadas, como se muestra en la siguiente captura de pantalla. Uno de los famosos complementos que destacan el código es la sintaxiHighLighter de Alex Gorbatchev.

A continuación se muestra una captura de pantalla del efecto similar al complemento resaltado:

Puede hacer clic aquí para obtener una vista previa del efecto (la página de demostración muestra el código de complemento jQuery Cookie).

Los comentarios del blog, incluidos estos sitios impulsados ​​por WordPress, están integrados en listas ordenadas, ofrecen opciones de estilo muy flexibles y sientan las bases para el anidamiento de comentarios. La siguiente imagen es una captura de pantalla de la sección de comentarios de la historia de Mr.Gray - Web Interaction Design Gray 8 Aplicaciones Artículo publicado por Tencent CDC TD ayer.

El representante más típico es la exhibición de miles de categorías de productos en la columna de categoría de bebé de la página de inicio de Taobao:

Como se puede ver en la captura de pantalla, el propósito de esta categoría se muestra utilizando la lista de definición DL, DT y DD.

Hay muchas otras aplicaciones para elementos de lista, como barras de progreso para cargas de imágenes múltiples, menús de pasos CSS, menús superpuestos, etc. No les mostraré uno por uno aquí.

Los elementos de etiqueta HTML son ladrillos y azulejos, que se ven muy ordinarios, pero cuando se trata de excelentes diseñadores y excelentes trabajadores, ejercerán su potencial y encanto infinitos, por lo que tenemos un colorido Internet. Lo mismo es cierto para los elementos de la lista. Aunque hay docenas de más usos y técnicas para discutir en este artículo, algunas de las cosas que se muestran en este artículo nos darán una comprensión profunda de la descripción general de los elementos de etiqueta de lista en HTML, ayudándole a construir hermosos edificios de Internet con ladrillos como listas.

• El listamático

• Diseño de CSS: listas de domesticación

• Listas de CSS en W3Schools

• Listas de definición: ¿mal usado o incomprendido?

• Listas de estilo CSS: más de 20 demostraciones, tutoriales y mejores prácticas

• Enumere los elementos en la referencia HTML de SitePoint