Home > Web Front-end > CSS Tutorial > Why Aren't My Inline-Block Elements Working in Internet Explorer 6 and 7?

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

Mary-Kate Olsen
Release: 2024-12-21 08:11:13
Original
184 people have browsed it

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?

</p>
<h1>signup {</h1>
<p>color:#FFF;<br>   border-bottom:solid 1px #444;<br>   text-transform:uppercase;<br>   text-align:center;<br>}</p>
<h1>signup #left {</h1>
<p>display: inline-block<br>}</p>
<h1>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>signup #right a { font-size:100%; font-weight:bold }</h1>
<h1>signup #right p { font-size:90%; font-weight:bold }</h1>
<h1>signup a:hover  { color:#FFF; text-decoration:underline }</h1>
<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:

</p>
<h1>yourElement {</h1>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">display: inline-block;
*display: inline;
zoom: 1;
Copy after login

}

  • *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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template