Inline-block compatibility

If an element is set to Display:inline-block, then this element will behave as a property of the inline block. Elements that are set as inline blocks

The inner (child element) is represented as a block-level box, in which the height width can be set, vertical margin and padding can be set, etc. on sibling elements

is displayed in the inline box, in which the adjacent inline block can be shown on the same line, with the characteristics of the inline element, which can appear between the box and the box

Blank, resulting in a blank way to make "whitespace characters, tabs, newline characters".

A simple way to eliminate whitespace between blocks in rows is to set properties on the containing block of a block within a row:

　　

. wrapper{font-size:0;*word-spacing: -1px;}

Font-size is set to 0, which allows the size of these whitespace characters to be 0, which is not displayed. However, there are 1px intervals under ie6,7, which can be

Set word-spacing to fix.

However, for Safari, the font size of 0 is not supported, so additional corrections are required:

@media screen and (-webkit-min-device-pixel-ratio:0) {            . wrapper {                letter-spacing: -4px;/* Fix safari */            }        }

In addition, ie6,7 does not have a Inline-block attribute, but can be simulated by triggering haslayout on inline elements.

In summary, the implementation of the method of correcting whitespace between block elements in rows:

        @media screen and (-webkit-min-device-pixel-ratio:0) {            . wrapper {                letter-spacing: -4px;/* Safari, etc. does not support browse with font size 0 To adjust the */}} According to the parent font        . wrapper{font-size:0;*word-spacing: -1px;}        . il{border:1px Solid #000000;d Isplay:inline-block;word-spacing:normal;letter-spacing:normal;*display:inline;*zoom : 1;width:80px;height:100px;background: #cecece; font-size:14px;vertical-align:top;}        . bl{border:1px solid #000000; Width:80px;height:100px;word-spacing:normal;letter-spacing:normal;background: #d0e9c6 ;d isplay:inline-block;*display:inline;*zoom:1;font-size:14px;vertical-align:top;}        img{border:1px solid #000000;}            

<div class= "wrapper" >
<span class= "Il" >inline-block 1</span>
<span class= "Il" >inline-block 2</span>
<span class= "Il" >inline-block 3</span>
<div class= "BL" >block 1</div>
<div class= "BL" >block 2</div>
<div class= "BL" >block 3</div>


</div>

　　

Inline-block compatibility