Use of inline-block in IE6 and 7

The ul li structure is generally used for navigation bars. Most of the time, I set li to float = left to display the same row side by side, finally, clear the floating (clear: both) to prevent subsequent elements from being affected.
Another way is to set li to display: inline; to achieve the same effect, but the problem is that the characteristics of the inline element: the width, height, and upper and lower margin cannot be set by default, (padding is a bit special. in ie6 and 7, inline elements cannot be set to upper and lower padding, but can be set to upper and lower padding in a standard browser ).
In view of this feature of inline elements, what should we do if we do not float and want li to be displayed in a row and can set attributes such as height, width, upper and lower margin, and upper and lower padding?

There is also an inline-block attribute in the CSS attribute, which is both an in-Row Element and a block element. It can be set in width and height. So we certainly want to use inline-block for implementation, but there is a small problem here. ie6 and ie7 do not fully support the value of inline-block. The addition of display: inline-block does not affect the element at all.

So let's try to solve this problem. This involves the haslayout attribute in ie6 and 7. The inline element in ie6 and 7 has a special situation, that is, layout is available after the hasLayout attribute of ie is triggered. In this case, the expression of the inline element is basically the same as that of the inline-block element in the standard browser. In the following example, we use the private attribute zoom of ie to trigger hasLayout.

After learning about the above situation, we can solve the previous problem. CSS:

Li {
Display: inline-block;/* identification of standard browsers such as firefox */
* Display: inline;/* Only ie6 and ie7 recognize the so-called IE Hack */
Zoom: 1;/* trigger haslayout under ie6 and ie7 */
Width: 80px;
Height: 20px;
Margin: 10px;
Padding: 10px;
Text-align: center;
Background: # cfc;
}

In this way, you can achieve consistent inline-block Effects in IE 6, 7, Firefox and other browsers.