List tag ul, ol, dl: compatibility issues for different browsers

Introduction to web page production articles: Research and application of HTML CSS list elements ul, ol, dl.

HTML list elements (such as ol, ul, dl) are widely used in current website development and production, but their tempers are different in different browsers. This article analyzes the basic characteristics of these list elements, various compatibility issues in different browsers, and introduces some common applications.

It should be helpful to beginners or those who have some experience in CSS.

Unordered lists are the most commonly used lists. The following figure shows the display of unordered lists in different browsers:

demo page

As shown above, the default settings of unordered lists under different browsers are slightly different. Of course, there are few unordered lists that are not modified in actual website projects today. One of the reasons is the CSS reset, which has removed the default list bullets, margins or paddings for unordered lists.

Some specific css properties of unordered lists are list-style-type, list-style-position, and list-style-image. These properties set the type of list bullets, the location of the tag, and the use of pictures instead of tags. These three properties can be merged with list-style.

The list-style-type attribute can be set to some different values. The following chart shows the page effect of some values:

Depending on the user's browser and operating system, some list-style-item values ​​may not be displayed correctly, and usually defaults to decimal values. It is not recommended to use an unnecessary list to increment the value, because the semantics of the unordered list itself no longer exist.

list-style-position can be set to outside (default) or inside for the position of the list tag. If list-style-image is set, it will also affect the location of the image.

The list-style-image attribute can give unordered lists a custom unique performance. Unfortunately, using this method to add project numbers in IE is a lot of bugs, so it is rarely used. A better solution is to add background image to the li element of the list, and adjust the location of the background image accordingly and set to no-repeat. On maxdesign.com, this method has been demonstrated through step-by-step explanations and works well in all browsers.

Ordered lists are used when an incremental value is required in front of each list item of the list item (e.g. 1, 2, 3, etc.). The list type list-style-type of an ordered list can be set to any value that can be set under an unordered list. In most cases, an ordered list is either preceded by an incremental value or is not preceded by any marks. It is not recommended to use ordered lists to achieve behavior similar to unordered lists. Because of this, the semantics of the ordered list itself are no longer correct.

The definition list is used to mark the defined list items, which include the definition title (dt) and the definition itself (dd). There is no need to match exactly when defining a list item, the following code is completely legal under strict XHTML:

<dl> <dt>Wireless Music Miguhui</dt> <dt>Copenhagen Conference</dt> <dd>"October Siege"</dd></dl>

This way you can use multiple dts under a single dd, or multiple dds under a single dt.

Define the visual display of the list. By default, the display of each browser is almost the same as shown in the figure below:

demo page

The HTML code corresponding to the above picture is as follows:

<dl> <dt>Title</dt> <dd>Here is the definition</dd> </dl> <dl> <dt>Popular movies</dt> <dd>October siege</dd> <dd>Taoling</dd> <dd>Three guns to slap the table</dd> <dd>Avatar</dd> </dl> <dl> <dt>Hot topic</dt> <dd>Stock market</dd> <dd>House prices</dd> <dd>New Year's Day</dd> <dd>Cao Cao's Tomb</dd> </dl> 4. Obsolete list: menu&dir

<menu> and <dir> elements, technically, can also be called HTML lists, but they are outdated in XHTML, so they are not discussed in detail here.

In HTML, the unordered list remains essentially the same, although it seems now that it is simply called a list, and new elements will be used to wrap the list as a navigation.

The ol element has a slight change, and it obtains two new properties: reversed, which is a boolean value to indicate whether the list rises or falls; start, which is an integer to declare the starting point of the ordered list.

In addition, the <figure> and <details> elements will be added, and they will have child elements, including the <dt> and <dd> elements.

For more information about HTML5, please refer to this article on Taobao Kongyan’s Revealing HTML5 and CSS3 [Baibiao Milk Tea Gang]. In addition, you can also click here to view the online ppt.

The following are some common and obvious browser differences.

Under Internet Explorer 8, Opera 9, Chrome, Firefox 2 & 3, and Safari, adding display:block will cause the item number of li elements in an ordered or unordered list to disappear.

But under IE6 and IE7, adding the display:block bullet still exists:

demo page

Under IE6 and IE7, adding float:left to list items (no other styles) will make the list items horizontally aligned while the bullets (or item number) disappear. As shown in the figure below, it is cut from IE7 browser

Under IE8 and all other browsers, the list items are horizontally aligned, but the bullets (or project numbers) are still visible.

demo page

When the list item floats, we must remember another key point, that is, the list container (ul element) will die when there are only floating elements inside. This will happen in the same way in all browsers. Adding overflow:hidden is one of the solutions to this problem.

In order to achieve approximately the same float:left effect in different browsers, the best way is to use display:inline.

Under IE6 and IE7, if the list item in the ordered list has a Layout, the value of the ordered list will not increase and will be displayed as 1, as shown in the figure below:

demo page

The hasLayout property cannot be set directly, but if an element is set to have width, height, floating, absolute positioning, waiting will change haslayout.

In most browsers, in order to remove bullets or project numbers and to align the left side of the content, you need to set the left padding to 0, but this does not work in IE6 and IE7. In IE6 and 7, you need to set the left margin to 0 and replace it. See the picture below:

demo page

To avoid problems when handling list styles under different browsers, the best way is to use the CSS reset mentioned above. The css reset can set almost all default settings differences in the browser and allow all browsers to work on the same basis. Although there are still differences in some styles, they will not be treated as a difficult point.

Also, as mentioned earlier, it is best to avoid using the list-style-image property altogether and instead set background instead, a custom symbolic workaround for cross-browser, easy-to-maintain unordered lists.

By far, the most common use of unordered lists is navigation bars, whether horizontal or vertical. Since table-based layouts have become obsolete, unordered lists have been widely used as the basis for navigation elements, for the following reasons:

•Unordered lists belong to block level elements and do not need to wrap a div outside to apply background or other graphic extensions.

•When the style is disabled, the list style will be calmly downgraded, maintaining its original style, which can ensure that the navigation items are different from other contents on the page.

•Although an unordered list is not just a simple list, adding elements such as <a> tags, additional <li> elements will make the navigation bar express in a more flexible form.

• Navigation is divided into lists and/or sublists, allowing the use of auxiliary technologies (such as screen readers) that users can easily skip the entire navigation bar.

For example: LavaLamp special effect menu implemented using jQuery

For example, an example of a drop-down menu I made some time ago: jQuery uses slideToggle to implement vertical drop-down menu

Effect demo

HTML list tag ul,li provides an effective way to display a photo list for the same reasons as mentioned above in the navigation bar. Below are some photo galleries or photo display components based on HTML tags.

jCarousel

jCarousel photo switching transmission jQuery plug-in provides customizable jQuery functions, using unordered lists, and can display transmission effects in many different ways. I have translated this plugin into Chinese, you can click here harshly: jCarousel Chinese demo homepage

InnerFade – jQuery

The innerfade plug-in can enable any list-form content to fade in and out to switch display, or to switch display up and down. The content can be text, pictures, etc. Supports various tags, list tags, ul, li, div, and p tags.

It can easily realize automatic random switching display of news or announcement content, or playback display of picture slideshows, etc. The following figure shows the transition phase of image slide switching:

This plug-in demo is hard to click here: InnerFade demo page

Many blogs and tutorial websites contain JavaScript highlighting code that convert pre elements or textarea elements into ordered lists, as shown in the following screenshot. One of the famous code highlighting plugins is Alex Gorbatchev's SyntaxHighlighter.

Below is a screenshot of the effect similar to the highlighted plugin:

You can click here to preview the effect (the demo page shows the jQuery cookie plug-in code).

Blog comments, including these WordPress-driven sites, are built in ordered lists, offer very flexible styling options and lay the foundation for comment nesting. The following picture is screenshot from the comment section of The Story of Mr.Gray — Web Interaction Design Gray 8 Applications Article released by Tencent CDC Td yesterday.

The most typical representative is the display of thousands of product categories in the Baby category column of Taobao homepage:

As can be seen from the screenshot, the purpose of this category is displayed using the dl, dt, and dd definition list.

There are many other applications for list elements, such as progress bars for multi-image uploads, CSS step menus, overlapping menus, and so on. I won't show them one by one here.

The HTML tag elements are bricks and tiles, which look very ordinary, but when it comes to excellent designers and excellent workers, they will exert their infinite potential and charm, so we have a colorful Internet. The same is true for list elements. Although there are dozens of more uses and techniques to discuss in this article, some of the things shown in this article will give us a thorough understanding of the overview of list tag elements in HTML, helping you build beautiful Internet buildings with bricks like lists.

•The Listamatic

•CSS Design: Taming Lists

•CSS Lists on W3Schools

•Definition lists – misused or misunderstood?

•CSS-Styled Lists: 20+ Demos, Tutorials and Best Practices

•List Elements on Sitepoint 's HTML Reference