Why Aren't My Inline-Block Elements Working in Internet Explorer 6 and 7?

Making Inline-Block Elements Work in Internet Explorer 6 and 7

Q: I'm using inline-block elements in my CSS code, but they're not working properly in Internet Explorer 6 and 7. What am I doing wrong?

<h1 id="signup">signup {</h1><p>color:#FFF;<br>   border-bottom:solid 1px #444;<br>   text-transform:uppercase;<br>   text-align:center;<br>}</p><h1 id="signup-left">signup #left {</h1><p>display: inline-block<br>}</p><h1 id="signup-right">signup #right {</h1><p>background-image:url(images/signup.jpg);<br>   border-left: solid 1px #000;<br>   border-right: solid 1px #000;<br>   display: inline-block; <br>   padding:1% 2%<br>   width:16%;<br>}</p><h1 id="signup-right-a-font-size-font-weight-bold">signup #right a { font-size:100%; font-weight:bold }</h1><h1 id="signup-right-p-font-size-font-weight-bold">signup #right p { font-size:90%; font-weight:bold }</h1><h1 id="signup-a-hover-color-FFF-text-decoration-underline">signup a:hover  { color:#FFF; text-decoration:underline }</h1><p></p>

A: In Internet Explorer 6 and 7, inline-block only works on naturally inline elements like spans. To make it work on other elements like divs, you need the following:

<h1 id="yourElement">yourElement {</h1><pre class="brush:php;toolbar:false">display: inline-block;
*display: inline;
zoom: 1;

}

• *display: inline is a CSS hack specific to IE7 and below.
• zoom: 1 ensures that the element has layout, which is a requirement for inline-block to work.

While it's possible to implement this workaround with valid CSS, it's not recommended, especially if you're already using vendor-prefixed properties. For more information on inline-block, refer to this resource.

The above is the detailed content of Why Aren't My Inline-Block Elements Working in Internet Explorer 6 and 7?. For more information, please follow other related articles on the PHP Chinese website!