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 shows that IE can recognize the display: inline-block attribute, this is not the case ......
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 IE haslayout, there is a detailed introduction to IE hasLayout, which should be understood by front-end developers. 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.
Copy to ClipboardReference: [www.bkjia.com] <! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> display: inline-block attribute of an element in the row </title>
</Head>
<Style type = "text/css">
. Box {
Width: 20%;
Height: 50px;
Margin: 0 0 10px 10px;
Border: solid 3px # f00;
}
. Sty-lb {
Display: inline-block;
}
</Style>
<Body>
<Span class = "box sty-lb"> display: inline-block attribute of row elements </span>
<Span class = "box sty-lb"> display: inline-block attribute of row elements </span>
<Span class = "box sty-lb"> display: inline-block attribute of row elements </span>
<Span class = "box sty-lb"> display: inline-block attribute of row elements </span>
</Body>
</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.
Copy to ClipboardReference: [www.bkjia.com] <! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> display: inline-block attribute of block-level elements </title>
</Head>
<Style type = "text/css">
. Box {
Width: 20%;
Height: 50px;
Margin: 0 0 10px 10px;
Border: solid 3px # f00;
}
. Sty-lb {
Display: inline-block;
}
</Style>
<Body>
<Div class = "box sty-lb"> display: inline-block attribute of block-level elements </div>
<Div class = "box sty-lb"> display: inline-block attribute of block-level elements </div>
<Div class = "box sty-lb"> display: inline-block attribute of block-level elements </div>
<Div class = "box sty-lb"> display: inline-block attribute of block-level elements </div>
</Body>
</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.Try
Copy to ClipboardReference: [www.bkjia.com] <! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> display: inline-block attribute of block-level elements </title>
</Head>
<Style type = "text/css">
. Box {
Width: 20%;
Height: 50px;
Margin: 0 0 10px 10px;
Border: solid 3px # f00;
}
. Sty-lb {
Zoom: 1;/* haslayout attribute of the trigger element */
Diylay: inline-block;/* Non-IE6 and 7 browsers recognize this attribute, making the page block Layout */
* Display: inline;/* define display: inline for IE6 and 7, and present block elements as inline objects and tables with the display: inline-block attribute */
}
</Style>
<Body>
<Div class = "box sty-lb"> display: inline-block attribute of block-level elements </div>
<Div class = "box sty-lb"> display: inline-block attribute of block-level elements </div>
<Div class = "box sty-lb"> display: inline-block attribute of block-level elements </div>
<Div class = "box sty-lb"> display: inline-block attribute of block-level elements </div>
</Body>
</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.