Liste Tag UL, OL, DL: Problèmes de compatibilité pour différents navigateurs

Introduction aux articles de production de pages Web: Recherche et application des éléments de liste CSS HTML UL, OL, DL.

Les éléments de liste HTML (tels que OL, UL, DL) sont largement utilisés dans le développement et la production actuels de sites Web, mais leurs températures sont différentes dans différents navigateurs. Cet article analyse les caractéristiques de base de ces éléments de liste, divers problèmes de compatibilité dans différents navigateurs et introduit certaines applications communes.

Cela devrait être utile aux débutants ou à ceux qui ont une certaine expérience dans le CSS.

Les listes non ordonnées sont les listes les plus couramment utilisées. La figure suivante montre l'affichage des listes non ordonnées dans différents navigateurs:

page de démonstration

Comme indiqué ci-dessus, les paramètres par défaut des listes non ordonnés sous différents navigateurs sont légèrement différents. Bien sûr, il y a peu de listes non ordonnées qui ne sont pas modifiées dans les projets de sites Web aujourd'hui. L'une des raisons est la réinitialisation CSS, qui a supprimé les balles, marges ou rembourrage de liste par défaut pour les listes non ordonnées.

Certaines propriétés CSS spécifiques des listes non ordonnées sont de type list, de style, de position de style liste et d'image de style liste. Ces propriétés définissent le type de balles de liste, l'emplacement de la balise et l'utilisation d'images au lieu des balises. Ces trois propriétés peuvent être fusionnées avec la liste.

L'attribut de type list-style peut être défini sur différentes valeurs. Le tableau suivant montre l'effet de la page de certaines valeurs:

Selon le navigateur et le système d'exploitation de l'utilisateur, certaines valeurs de style liste peuvent ne pas être affichées correctement et généralement des valeurs décimales. Il n'est pas recommandé d'utiliser une liste inutile pour incrémenter la valeur, car la sémantique de la liste non ordonnée elle-même n'existe plus.

La position de style liste peut être définie sur l'extérieur (par défaut) ou à l'intérieur pour la position de la balise de liste. Si l'image de style liste est définie, cela affectera également l'emplacement de l'image.

L'attribut d'image de style liste peut donner aux listes non ordonnées une performance unique personnalisée. Malheureusement, l'utilisation de cette méthode pour ajouter des numéros de projet dans IE est de nombreux bogues, il est donc rarement utilisé. Une meilleure solution consiste à ajouter l'image d'arrière-plan à l'élément Li de la liste, et à ajuster l'emplacement de l'image d'arrière-plan en conséquence et à définir sans répétition. Sur maxdesign.com, cette méthode a été démontrée à travers des explications étape par étape et fonctionne bien dans tous les navigateurs.

Les listes commandées sont utilisées lorsqu'une valeur incrémentielle est requise devant chaque élément de liste de l'élément de liste (par exemple 1, 2, 3, etc.). La liste de types de type liste de type d'une liste commandée peut être définie sur n'importe quelle valeur qui peut être définie dans une liste non ordonnée. Dans la plupart des cas, une liste ordonnée est soit précédée d'une valeur incrémentielle, soit n'est précédée d'une note. Il n'est pas recommandé d'utiliser des listes ordonnées pour réaliser un comportement similaire aux listes non ordonnées. Pour cette raison, la sémantique de la liste ordonnée elle-même n'est plus correcte.

La liste de définition est utilisée pour marquer les éléments de liste définis, qui incluent le titre de définition (DT) et la définition elle-même (DD). Il n'est pas nécessaire de correspondre exactement à la définition d'un élément de liste, le code suivant est complètement légal sous strict xhtml:

<dl> <dt> Musique sans fil Miguhui </dt> <dt> Conférence de Copenhague </dt> <dd> "Octobre Siege" </dd> </dl>

De cette façon, vous pouvez utiliser plusieurs DTs sous un seul DD, ou plusieurs DD dans un seul DT.

Définissez l'affichage visuel de la liste. Par défaut, l'affichage de chaque navigateur est presque le même que dans la figure ci-dessous:

page de démonstration

Le code HTML correspondant à l'image ci-dessus est le suivant:

<dl> <dt> Title </dt> <dd> Voici la définition </dd> </dl> <dl> <dt> Films populaires </dt> <dd> Octobre Siege </dd> <DD> Taoling </dd> <dd> trois pistolets pour gifler le tableau </dd> <dd> Avatar </dd> </dl> Sujet </dt> <dd> Marché boursier </dd> <dd> Prix de la maison </dd> <dd> jour du Nouvel An </dd> <dd> Tombe de Cao Cao </dd> </dl> 4. Liste obsolète: menu et dir

Les éléments <nunu> et <dir>, techniquement, peuvent également être appelés listes HTML, mais elles sont obsolètes dans XHTML, donc elles ne sont pas discutées en détail ici.

Dans HTML, la liste non ordonnée reste essentiellement la même, bien qu'elle semble maintenant qu'elle s'appelle simplement une liste, et de nouveaux éléments seront utilisés pour envelopper la liste comme navigation.

L'élément OL a un léger changement, et il obtient deux nouvelles propriétés: inversée, qui est une valeur booléenne pour indiquer si la liste augmente ou diminue; Démarrer, qui est un entier pour déclarer le point de départ de la liste ordonnée.

De plus, les éléments <pigne> et <thoard> seront ajoutés, et ils auront des éléments enfants, y compris les éléments <dt> et <dd>.

Pour plus d'informations sur HTML5, veuillez vous référer à cet article sur le HTML5 et CSS3 révélateur de Taobao Kongyan [Baibiao Milk Tea Gang]. De plus, vous pouvez également cliquer ici pour consulter le PPT en ligne.

Voici quelques différences de navigateur courantes et évidentes.

Sous Internet Explorer 8, Opera 9, Chrome, Firefox 2 & 3 et Safari, l'ajout de l'affichage: Block provoquera la disparition du numéro d'article des éléments Li dans une liste ordonnée ou non ordonnée.

Mais sous IE6 et IE7, l'ajout de l'affichage: Block Bullet existe toujours:

page de démonstration

Sous IE6 et IE7, l'ajout de float: laissé à la liste des éléments (aucun autre styles) fera disparaître les éléments de liste horizontalement tandis que les balles (ou numéro d'élément) disparaissent. Comme indiqué dans la figure ci-dessous, il est coupé du navigateur IE7

Sous IE8 et tous les autres navigateurs, les éléments de la liste sont alignés horizontalement, mais les balles (ou numéros de projet) sont toujours visibles.

page de démonstration

Lorsque l'élément de liste flotte, nous devons nous souvenir d'un autre point clé, c'est-à-dire que le conteneur de liste (élément UL) mourra lorsqu'il n'y a que des éléments flottants à l'intérieur. Cela se produira de la même manière dans tous les navigateurs. Ajout d'un débordement: Hidden est l'une des solutions à ce problème.

Afin d'atteindre approximativement le même flotteur: effet gauche dans différents navigateurs, la meilleure façon est d'utiliser l'affichage: en ligne.

Sous IE6 et IE7, si l'élément de liste dans la liste commandée a une mise en page, la valeur de la liste commandée n'augmentera pas et sera affichée comme 1, comme indiqué dans la figure ci-dessous:

page de démonstration

La propriété Haslayout ne peut pas être définie directement, mais si un élément est défini pour avoir une largeur, une hauteur, un positionnement flottant, un positionnement absolu, l'attente changera Haslayout.

Dans la plupart des navigateurs, afin de supprimer des balles ou des numéros de projet et pour aligner le côté gauche du contenu, vous devez régler le rembourrage gauche sur 0, mais cela ne fonctionne pas dans IE6 et IE7. Dans IE6 et 7, vous devez régler la marge gauche sur 0 et la remplacer. Voir l'image ci-dessous:

page de démonstration

Pour éviter les problèmes lors de la gestion des styles de liste sous différents navigateurs, la meilleure façon est d'utiliser la réinitialisation CSS mentionnée ci-dessus. La réinitialisation CSS peut définir presque toutes les différences de paramètres par défaut dans le navigateur et permettre à tous les navigateurs de fonctionner sur la même base. Bien qu'il y ait encore des différences dans certains styles, ils ne seront pas traités comme un point difficile.

En outre, comme mentionné précédemment, il est préférable d'éviter d'utiliser complètement la propriété de style liste et de définir à la place un arrière-plan à la place, une solution symbolique personnalisée pour les listes de croisement, faciles à maintenir.

De loin, l'utilisation la plus courante des listes non ordonnées est les barres de navigation, qu'elles soient horizontales ou verticales. Étant donné que les dispositions basées sur la table sont devenues obsolètes, les listes non ordonnées ont été largement utilisées comme base pour les éléments de navigation, pour les raisons suivantes:

• Les listes non ordonnées appartiennent aux éléments de niveau de bloc et n'ont pas besoin d'envelopper un div à l'extérieur pour appliquer un arrière-plan ou d'autres extensions graphiques.

• Lorsque le style est désactivé, le style de liste sera calmement rétrogradé, en maintenant son style d'origine, ce qui peut garantir que les éléments de navigation sont différents des autres contenus de la page.

• Bien qu'une liste non ordonnée ne soit pas seulement une liste simple, l'ajout d'éléments tels que <a> balises, des éléments supplémentaires <li> rendront la barre de navigation exprimeront sous une forme plus flexible.

• La navigation est divisée en listes et / ou sublilistes, permettant l'utilisation de technologies auxiliaires (telles que les lecteurs d'écran) que les utilisateurs peuvent facilement ignorer toute la barre de navigation.

Par exemple: Menu à effet spécial Lavalamp Implémenté à l'aide de jQuery

Par exemple, un exemple de menu déroulant que j'ai fait il y a quelque temps: JQuery utilise Slidetoggle pour implémenter le menu déroulant vertical

Démo-effet

HTML List Tag UL, Li fournit un moyen efficace d'afficher une liste de photos pour les mêmes raisons que celles mentionnées ci-dessus dans la barre de navigation. Vous trouverez ci-dessous quelques galeries de photos ou composants d'affichage photo basés sur des balises HTML.

jcarousel

Le plug-in jcaRousel Photo Switching Transmission jQuery fournit des fonctions jQuery personnalisables, en utilisant des listes non ordonnées et peut afficher les effets de transmission de différentes manières. J'ai traduit ce plugin en chinois, vous pouvez cliquer ici durement: page d'accueil de démo chinoise JCarel

Innerfade - jQuery

Le plug-in Innerfade peut permettre à n'importe quel contenu de forme de liste de s'estomper pour changer d'affichage, ou pour changer d'affichage de haut en bas. Le contenu peut être du texte, des images, etc. prend en charge diverses balises, balises de liste, UL, Li, Div et P.

Il peut facilement réaliser l'affichage automatique de commutation aléatoire du contenu des nouvelles ou de l'annonce, ou l'affichage de lecture des diaporamas d'image, etc. La figure suivante montre la phase de transition de la commutation de diapositive d'image:

Cette démo plug-in est difficile à cliquer ici: Page de démonstration Innerfade

De nombreux blogs et sites Web de didacticiels contiennent JavaScript mettant en évidence le code qui convertit les éléments préalables ou les éléments de TextArea en listes ordonnées, comme indiqué dans la capture d'écran suivante. L'un des fameux code mettant en évidence les plugins est SyntaxHighlighter d'Alex Gorbatchev.

Vous trouverez ci-dessous une capture d'écran de l'effet similaire au plugin en surbrillance:

Vous pouvez cliquer ici pour prévisualiser l'effet (la page de démonstration affiche le code plug-in de cookie jQuery).

Les commentaires du blog, y compris ces sites axés sur WordPress, sont construits dans des listes commandées, offrent des options de style très flexibles et jettent les bases de la nidification des commentaires. L'image suivante est la capture d'écran de la section des commentaires de l'histoire de Mr. Gray - Web Interaction Design Gray 8 Applications Article publié par Tencent CDC TD hier.

Le représentant le plus typique est l'affichage de milliers de catégories de produits dans la colonne de catégorie bébé de la page d'accueil de Taobao:

Comme le montre la capture d'écran, le but de cette catégorie s'affiche à l'aide de la liste de définition DL, DT et DD.

Il existe de nombreuses autres applications pour les éléments de liste, tels que les barres de progression pour les téléchargements multi-images, les menus de pas CSS, les menus qui se chevauchent, etc. Je ne leur montrerai pas un par un ici.

Les éléments de tag HTML sont des briques et des carreaux, qui semblent très ordinaires, mais en ce qui concerne les excellents designers et les excellents travailleurs, ils exerceront leur potentiel et leur charme infinis, nous avons donc un Internet coloré. Il en va de même pour les éléments de liste. Bien qu'il y ait des dizaines d'utilisations et de techniques supplémentaires à discuter dans cet article, certaines des choses montrées dans cet article nous donneront une compréhension approfondie de l'aperçu des éléments de balise de liste dans HTML, vous aidant à créer de beaux bâtiments Internet avec des briques comme des listes.

• la liste

• Conception CSS: listes d'approvisionnement

• Listes CSS sur W3Schools

• Listes de définition - mal utilisées ou mal comprises?

• Listes de style CSS: 20+ démos, tutoriels et meilleures pratiques

• Énumérer les éléments sur la référence HTML de SitePoint