It is known that the properties of Display:inline-block are not supported in IE6, so let's take a look at the effects of block elements and restrained elements in IE6 and resolve compatible methods:
<style type= "Text/css" >
*{padding:0; margin:0;}
body{font-size:14px; color:blue; font-weight:bold; }
div{ display:inline-block; width:200px; height:100px; background: #ddd}
a{Display:inline-block; width:200px; height:200px; Background:red}
</style>
The HTML is as follows://Use div to represent block element A to represent inline element under only set Display:inline-block
<body>
<div> I'm div1</div>.
<div> I'm div2</div>.
<a href= "#" > I'm a1</a>.
<a href= "#" > I'm a2</a>.
</body>
We find that the div can be set to a wide height, but it cannot be presented as an inline element before and after a single row.
A can be set to a wide height, without an exclusive line, presenting an inline presentation (representation).
HTML structure does not change div append zoom:1; _display:inline; Property
div{ display:inline-block; zoom:1; _display:inline; width:200px; height:100px; background: #ddd}
a{ display:inline-block; width:200px; height:200px; background:red}
Change
We can see that the DIV has an inline presentation of the Inline-block, _zoom:1 triggered the layout of IE browser, and then set the Display:inline, and his behavior is similar to the Inline-block in the standard!
At this point the CSS does not change, we adjust the HTML structure:
<body>
<a href= "#" > I'm a1</a>.
<a href= "#" > I'm a2</a>.
<div> I'm div1</div>.
<div> I'm div2</div>.
</body>
we found a space on the right side of the restrained element!!! In the first few figures, the right side of a is spaced, and we've tuned the structure to show that the right side of both a-label is spaced. Also available under the standard browser!
There are several ways to remove Inline-block:
remove space between HTML:
using HTML annotations:
all closed Tags: set the Include Element property font-size:0://Inline element IE6 7 There will be a small gap of 1px
There are a number of ways to solve the spacing problem here we don't introduce!!!!!
IE6 block elements and inline elements about Display:inline-block
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
