Lista Tag UL, OL, DL: Problemas de compatibilidade para diferentes navegadores

Introdução aos artigos de produção de páginas da web: Pesquisa e aplicação de elementos da lista HTML CSS UL, OL, DL.

Os elementos da lista HTML (como OL, UL, DL) são amplamente utilizados no desenvolvimento e produção de sites atuais, mas seus temperamentos são diferentes em diferentes navegadores. Este artigo analisa as características básicas desses elementos da lista, vários problemas de compatibilidade em diferentes navegadores e introduz alguns aplicativos comuns.

Deve ser útil para iniciantes ou para aqueles que têm alguma experiência no CSS.

As listas não ordenadas são as listas mais usadas. A figura a seguir mostra a exibição de listas não ordenadas em diferentes navegadores:

página de demonstração

Como mostrado acima, as configurações padrão de listas não ordenadas sob diferentes navegadores são um pouco diferentes. Obviamente, existem poucas listas não ordenadas que não são modificadas nos projetos reais do site hoje. Uma das razões é a redefinição do CSS, que removeu as balas, margens ou pás da lista padrão para listas não ordenadas.

Algumas propriedades específicas do CSS de listas não ordenadas são do tipo de lista, posição no estilo de lista e imagem no estilo de lista. Essas propriedades definem o tipo de balas da lista, a localização da tag e o uso de imagens em vez de tags. Essas três propriedades podem ser fundidas com o estilo de lista.

O atributo do tipo no estilo de lista pode ser definido como alguns valores diferentes. O gráfico a seguir mostra o efeito da página de alguns valores:

Dependendo do navegador e do sistema operacional do usuário, alguns valores de itens no estilo de lista podem não ser exibidos corretamente e geralmente padronizam os valores decimais. Não é recomendável usar uma lista desnecessária para incrementar o valor, porque a semântica da própria lista não ordenada não existe mais.

A posição no estilo de lista pode ser definida como externa (padrão) ou dentro da posição da tag da lista. Se a imagem no estilo de lista estiver definida, ela também afetará a localização da imagem.

O atributo de imagem em estilo de lista pode fornecer às listas não ordenadas um desempenho exclusivo personalizado. Infelizmente, o uso desse método para adicionar números de projeto no IE é muitos bugs, por isso raramente é usado. Uma solução melhor é adicionar a imagem de fundo ao elemento LI da lista e ajustar a localização da imagem em segundo plano e definir como sem repetição. No maxdesign.com, esse método foi demonstrado através de explicações passo a passo e funciona bem em todos os navegadores.

As listas ordenadas são usadas quando um valor incremental é necessário na frente de cada item da lista do item da lista (por exemplo, 1, 2, 3, etc.). O tipo de lista de tipo de lista de uma lista ordenada pode ser definida como qualquer valor que possa ser definido em uma lista não ordenada. Na maioria dos casos, uma lista ordenada é precedida por um valor incremental ou não é precedida por nenhuma marca. Não é recomendável usar listas ordenadas para alcançar comportamentos semelhantes às listas não ordenadas. Por esse motivo, a semântica da própria lista ordenada não está mais correta.

A lista de definições é usada para marcar os itens de lista definidos, que incluem o título de definição (DT) e a própria definição (DD). Não há necessidade de corresponder exatamente ao definir um item da lista, o código a seguir é completamente legal sob estrito XHTML:

<dl> <dt> Música sem fio Miguhui </dt> <dt> Conferência de Copenhagen </dt> <dd> "Cerco de outubro" </dd> </dl>

Dessa forma, você pode usar vários DTs em um único DD ou vários DDs em um único DT.

Defina a exibição visual da lista. Por padrão, a exibição de cada navegador é quase o mesmo que mostrado na figura abaixo:

página de demonstração

O código HTML correspondente à figura acima é a seguinte:

<dl> <dt> título </dt> <dd> Aqui está a definição </dd> </dl> <dl> <dt> filmes populares </dt> <dd> cerco de outubro </dd> <dd> TAOLING </DD> <DD> três pistolas para abatir a tabela </dd> <d> dd <dd> dd </dd </dd> <d>> três pistolas/dd <dd> <d> <dd> <dd> <dd> </dd> <d> três pistolas/dd <dd> <d> <d> <dd> <dd> </dd> <dd> <d> três armas para abatir a tabela <dd> <d> <d. Tópico </dt> <dd> Mercado de ações </dd> <dd> Preços da casa </dd> <dd> Dia do ano novo

Os elementos <pune> e <Ir>, tecnicamente, também podem ser chamados de listas HTML, mas estão desatualizadas no XHTML, para que não sejam discutidas em detalhes aqui.

No HTML, a lista não ordenada permanece essencialmente a mesma, embora pareça agora que é simplesmente chamada de lista, e novos elementos serão usados ​​para embrulhar a lista como uma navegação.

O elemento OL tem uma pequena mudança e obtém duas novas propriedades: revertido, o que é um valor booleano para indicar se a lista aumenta ou cai; Start, que é um número inteiro para declarar o ponto de partida da lista ordenada.

Além disso, os elementos <Figura> e <tahticl> serão adicionados e terão elementos filhos, incluindo os elementos <dt> e <dd>.

Para obter mais informações sobre o HTML5, consulte este artigo sobre o revelando HTML5 e CSS3 de Taobao Kongyan [gangue de chá de leite Baibiao]. Além disso, você também pode clicar aqui para ver o PPT online.

A seguir, são apresentadas algumas diferenças comuns e óbvias do navegador.

Sob o Internet Explorer 8, Opera 9, Chrome, Firefox 2 e 3 e Safari, a adição de exibição: o bloco fará com que o número do item de elementos LI em uma lista ordenada ou não ordenada desapareça.

Mas sob o IE6 e o ​​IE7, adicionando a exibição: a bala de bloco ainda existe:

página de demonstração

Sob IE6 e IE7, adicionando flutuação: à esquerda para listar itens (nenhum outro estilos) fará com que os itens da lista alinhem horizontalmente enquanto as balas (ou número do item) desaparecem. Como mostrado na figura abaixo, é cortado do navegador IE7

No IE8 e em todos os outros navegadores, os itens da lista estão alinhados horizontalmente, mas as balas (ou números de projeto) ainda são visíveis.

página de demonstração

Quando o item da lista flutua, devemos lembrar de outro ponto -chave, ou seja, o contêiner da lista (elemento UL) morrerá quando houver apenas elementos flutuantes dentro. Isso acontecerá da mesma maneira em todos os navegadores. Adicionar estouro: Hidden é uma das soluções para esse problema.

Para alcançar aproximadamente o mesmo flutuante: o efeito esquerdo em diferentes navegadores, a melhor maneira é usar a exibição: embutida.

No IE6 e IE7, se o item da lista na lista ordenada tiver um layout, o valor da lista ordenada não aumentará e será exibido como 1, como mostrado na figura abaixo:

página de demonstração

A propriedade HasLayout não pode ser definida diretamente, mas se um elemento estiver definido para ter largura, altura, flutuação, posicionamento absoluto, a espera mudará o HasLayout.

Na maioria dos navegadores, para remover balas ou números de projeto e alinhar o lado esquerdo do conteúdo, você precisa definir o preenchimento esquerdo para 0, mas isso não funciona no IE6 e IE7. No IE6 e 7, você precisa definir a margem esquerda como 0 e substituí -la. Veja a foto abaixo:

página de demonstração

Para evitar problemas ao manusear estilos de lista sob diferentes navegadores, a melhor maneira é usar a redefinição do CSS mencionada acima. A redefinição do CSS pode definir quase todas as diferenças de configurações padrão no navegador e permitir que todos os navegadores funcionem na mesma base. Embora ainda existam diferenças em alguns estilos, eles não serão tratados como um ponto difícil.

Além disso, como mencionado anteriormente, é melhor evitar o uso completamente da propriedade de imagem em estilo de lista e, em vez disso, definir um fundo, em vez disso, uma solução alternativa simbólica personalizada para listas não ordenadas de fácil manutenção e fácil de manutenção.

De longe, o uso mais comum de listas não ordenadas são as barras de navegação, seja horizontal ou vertical. Desde que os layouts baseados em mesa se tornaram obsoletos, listas não ordenadas têm sido amplamente utilizadas como base para os elementos de navegação, pelos seguintes motivos:

• As listas não ordenadas pertencem a elementos de nível de bloqueio e não precisam embrulhar uma Div fora para aplicar o plano de fundo ou outras extensões gráficas.

• Quando o estilo estiver desativado, o estilo da lista será rebaixado calmamente, mantendo seu estilo original, que pode garantir que os itens de navegação sejam diferentes de outros conteúdos na página.

• Embora uma lista não ordenada não seja apenas uma lista simples, adicionando elementos como tags <a>, elementos adicionais <li> farão com que a barra de navegação expresse de uma forma mais flexível.

• A navegação é dividida em listas e/ou sublistas, permitindo o uso de tecnologias auxiliares (como leitores de tela) que os usuários podem pular facilmente toda a barra de navegação.

Por exemplo: menu de efeito especial Lavalamp implementado usando jQuery

Por exemplo, um exemplo de menu suspenso que eu fiz há algum tempo: jQuery usa SlideToggle para implementar o menu suspenso vertical

Demonstração do efeito

Tag da lista HTML UL, LI fornece uma maneira eficaz de exibir uma lista de fotos pelos mesmos motivos mencionados acima na barra de navegação. Abaixo estão algumas galerias de fotos ou componentes de exibição de fotos com base em tags HTML.

Jcarousel

O plug-in jQuery Jcarousel de comutação de fotos fornece funções jQuery personalizáveis, usando listas não ordenadas e pode exibir efeitos de transmissão de várias maneiras diferentes. Eu traduzi este plugin para chinês, você pode clicar aqui severamente: JCARousel Chinese Demo Homepage

Innerfade - jQuery

O plug-in Innerfade pode permitir que qualquer conteúdo de forma de lista desapareça dentro e fora para alternar a tela ou alternar a exibição para cima e para baixo. O conteúdo pode ser texto, imagens, etc. suporta várias tags, tags de listas, ul, li, div e p tags.

Ele pode facilmente realizar a exibição automática de comutação aleatória de notícias ou conteúdo de anúncio, ou exibição de reprodução de apresentações de slides, etc. A figura a seguir mostra a fase de transição da troca de slides de imagem:

Esta demonstração plug-in é difícil de clicar aqui: Página de demonstração Innerfade

Muitos blogs e sites de tutoriais contêm JavaScript destacando código que converte os elementos pré ou os elementos textários em listas ordenadas, conforme mostrado na captura de tela a seguir. Um dos famosos plugins de destaque de código é a SyntaxHightlelighter de Alex Gorbatchev.

Abaixo está uma captura de tela do efeito semelhante ao plug -in destacado:

Você pode clicar aqui para visualizar o efeito (a página de demonstração mostra o código de plug-in jQuery Cookie).

Os comentários do blog, incluindo esses sites acionados pelo WordPress, são construídos em listas ordenadas, oferecem opções de estilo muito flexíveis e estabelecem a base para o ninho de comentários. A imagem a seguir é a captura de tela da seção de comentários da história do Mr.Gray - Design de Interação da Web Gray 8 Aplicações Artigo lançado pelo Tencent CDC TD ontem.

O representante mais típico é a exibição de milhares de categorias de produtos na coluna da categoria de bebê da página inicial do Taobao:

Como pode ser visto na captura de tela, o objetivo desta categoria é exibido usando a lista de definições DL, DT e DD.

Existem muitas outras aplicações para elementos de lista, como barras de progresso para uploads de várias imagens, menus de passo CSS, menus sobrepostos e assim por diante. Não vou mostrar a eles um por um aqui.

Os elementos de tag html são tijolos e telhas, que parecem muito comuns, mas quando se trata de excelentes designers e excelentes trabalhadores, eles exercerão seu potencial e charme infinitos, por isso temos uma internet colorida. O mesmo vale para os elementos da lista. Embora existam dezenas de mais usos e técnicas para discutir neste artigo, algumas das coisas mostradas neste artigo nos darão uma compreensão completa da visão geral dos elementos da tag de lista no HTML, ajudando você a criar belos edifícios da Internet com tijolos como listas.

• O listamático

• Design CSS: listas de domesticação

• Listas de CSS em W3schools

• Listas de definição - mal utilizadas ou incompreendidas?

• Listas de estilo CSS: mais de 20 demos, tutoriais e práticas recomendadas

• Listar elementos na referência HTML do SitePoint