We usually want to display inline elements in a row Block Layout. There are two methods. The most common method is. selector {display: block; float: Left ;......}, The second method is. selector {display: inline-block ;......}, The second method is supported in IE browser. The test result indicates that IE can recognize the display: inline-block attribute. However, this is not the case after I recently consulted the materials ......
Display: inline-block: Simply put, the object is presented as an inline object, but the content of the object is presented as a block object. This attribute is well supported in the new version of the main browser, while IE6 and 7 do not recognize the display: inline-block attribute. The reason why inline elements in IE6 and 7 are set display: the layout of blocks after inline-block is implemented because the display: inline-block triggers the layout feature of inline-level elements, which makes the inline elements have an inline-block table.
For details about ie haslayout and "What Is IE's haslayout", this article briefly introduces two important knowledge points of haslayout:
-
- After an inline element (such as span) in IE6 and 7 triggers the layout attribute, its behavior is similar to that of the standard inline-block.
- In IE6 and 7, block-level elements (such as Div) trigger the layout attribute and set the display: inline. The behavior of the element is similar to that of the standard inline-block.
Note: When testing IE8 and later versions, haslayout in display: inline-block does not work. Therefore, I believe that IE8 and later versions have eliminated display: haslayout triggered under the inline-block attribute.
Based on these two knowledge points, we tested the line Block Layout (inline-block:
1. Test whether to set display: inline-block for inline elements in IE6 and 7.
<! Doctype HTML>
The page displayed in the IE 6 browser is normal:
2. Test whether to set display: inline-block for block-level elements in IE6 and 7.
<! Doctype HTML>
In the IE 6 browser, the page is not what we want:
3. Trigger layout for the block-level elements in IE6 and 7, and set the display: inline test.
<! Doctype HTML>
Normally displayed in IE 6:
Conclusion: After the inline element in IE6 and 7 triggers the layout attribute, the table has the display: inline-block attribute, while the block-level element triggers the layout attribute and sets the display: inline, it also has table disease with the display: inline-block attribute.
This article from: http://www.wufangbo.com/ie6-ie7-display-inline-block/