Browser compatibility non-sequential table DL

Browser compatibility non-sequential table DL

Some of the specific CSS properties of the unordered list are list-style-type,list-style-position, and list-style-image. These properties set the type of the list bullet, the location of the marker, and the use of the picture instead of the tag. These three attributes can be combined by using list-style abbreviations.

Tag List-style-type, the size of different browsers and the location of the rendering is also different, it is rarely used. The List-style-image property can give an unordered list a custom unique performance, unfortunately, using this method to add item numbers under IE is a lot of bugs. A better solution is to list-style-type:none, add backgroundimage to the list of Li elements, and adjust the backgroundimage position accordingly, and set it to No-repeat.

Differences in the browser

1. After adding Display:block to list elements　

Under Internetexplorer8,opera9,chrome,firefox2&3,andsafari, adding display:block will cause the item number of the LI element in an ordered or unordered table to disappear. But under IE6 and IE7, add display:block bullets still exist

2. Add Float:left to list items　

Under IE6 and IE7, adding a float:left to a list item (no other style) will align the list items horizontally, and the bullets (or item number) disappear. IE8 and all other browsers, list items are horizontally aligned, but bullets (or item numbers) are still visible.

When the list item floats, we must remember another important point, that is, the list container (UL element) in the internal only floating elements will be dead, which in all browsers will happen in the same way, adding Overflow:hidden is one way to solve this problem.

In order to achieve roughly the same float:left effect under different browsers, the best way is to use Display:inline.

3, ie under the "Layout" of the ordered list

Under IE6 and IE7, if the list item in the sequence table has "Layout", the value of the sequence table will not increase.
The Haslayout property cannot be set directly, but if an element is set to a wide height, floating, the absolute position of the wait will change the haslayout.
4, ie6&ie7 under the padding and margin
In most browsers, in order to remove bullets or item numbers, let the left side of the content display, you need to set the left padding to 0, but this does not work under IE6 and IE7, in the ie6,7 need to set the left margin to 0 instead.
5. Implement a consistent list style under the browser
To avoid problems when working with list styles in different browsers, the best way to do this is to use the previously mentioned CSS Reset (cssreset), which cssreset almost all the default settings for the browser to be set to a minimum, and allows all browsers to work on the same basis. Although there are still differences in some styles, they are not treated as a pain point.
Also, as mentioned earlier, it is best to avoid using the List-style-image property completely, instead of setting the background instead, which is a cross-browser, easy-to-maintain custom symbol resolution for unordered lists.

Browser compatibility non-sequential table DL