UL's left-side docking (compatible)

Document directory

• Solution

Ul List objects are also objects that are prone to problems in IE and Mozilla/Firefox, mainly because of Firefox's default setting for ul objects. Before learning about this problem, first, let's look at the cause of the problem. First, let's look at the xhtml and CSS code. Xhtml encoding (DEMO ):
<Div id = "layout">
<Ul>
<Li> CSS website navigation </li>
<Li> advanced background control </li>
<Li> Use of list elements </li>
</Ul>
</Div>

Css encoding:
# Layout {
Border: 1px solid #333;
}
Ul {
List-style: none;
Padding-left: 0px;
}

The current code is very simple. just remove the ul list bullets and check the preview effect in the two browsers. In the standard state, the display of both browsers is normal. The key lies in the subsequent settings of ul. To use ul objects, you must set the margin element for typographical issues, to enable ul to place it in a proper position, modify css:
Ul {
List-style: none;
Margin-left: 0px;
}

After previewing, I found that ul in IE is aligned with div, but ul in Firefox does not move at all? Why? Modify the style sheet to see the following:
Ul {
List-style: none;
Padding-left: 0px;
}

Replace margin-left with padding-left this time to see the preview effect. This time, the effect is the opposite. Firefox has achieved a left-side approach, but IE has no effect.

Solution

Through the comparison of the two codes, I believe everyone should be able to figure it out. In IE and Firefox, some objects have default properties, such as h1 1_h6, which themselves carry a large font size, bold style, and some margin effects, as well as ul, as with the preview effect when no attribute is added, ul objects have margins by default.

However, we can see from these two examples that the default margin of ul in IE is caused by margin, while in Firefox, the default margin of ul is caused by padding, therefore, when we define margin and padding separately, we cannot achieve the same effect in both browsers. This is where ul has different performance in different browsers.

Of course, you can also use the hack method to set margin-left: 0px in IE; Set margin-left: 20px in Firefox, so that the two are the same, this can be a solution, not a core solution. We recommend that you use the tag selection character to unify the ul margin when designing a webpage with ul objects. For example, add the following code at the top of css:
Ul {
Padding: 0px;
Margin: 0px;
}

In this way, all ul objects on the page do not have the margin and padding values. When you need to perform the margin or padding operation on a ul, because they have been set to 0px by the code, therefore, when we perform the margin or padding operation, the calculation starts from 0, and the performance will no longer be different.