Display: inline-block in IE6 implement {transfer}

1. IE6/7 does not recognize inline-block, but triggers layout, which is the same as true.
2. IE6/7 does not fully support inline-block and is only valid for inline elements.

 

How can I implement the display: inline-block effect for block elements in IE?
There are two methods:
1. Use the display: inline-block attribute to trigger the block element first, and then define the display: inline, let the block element be presented as an inline object (two displays must be placed in two CSS declarations to achieve the effect, which is a classic bug in IE. If the display: inline-block is defined first, then set the display back to inline or block, and layout will not disappear ). The Code is as follows (... Is omitted from other attributes ):
Div {display: inline-block ;...}
Div {display: inline ;}
2. Set the block element to inline object submission (set the attribute display: inline), and then trigger the layout of the block element (for example, Zoom: 1 ). The Code is as follows:
Div {display: inline; ZOOM: 1 ;...}

 

The final problem can be solved as follows:

. Nav {text-align: center ;}

. Nav ul {display: inline-block! Important; * display: inline; ZOOM: 1; margin: 0; padding: 0 ;}

Display: inline-block! Important; can be implemented in FF, IE7 and later browsers because they support;

* Display: inline: enables IE6 to keep the row elements. Zoom: 1 triggers layout of IE6 to achieve the display: inline-block effect.

Display: inline-block in IE6 implement {transfer}