Ie7 Does Not Understand Display: Inline-Block

IE7 does not understand display: inline-block

The IE7 display: inline-block; hack is as follows:

display: inline-block;
*display: inline;
zoom: 1;

By default, IE7 only supports inline-block on naturally inline elements (Quirksmode Compatibility Table), so you only need this hack for other elements.

zoom: 1 is there to trigger hasLayout behaviour, and we use the star property hack for setting the display to inline only in IE7 and lower (newer browsers won't apply that). hasLayout and inline together will basically trigger inline-block behaviour in IE7, so we are happy.

This CSS will not validate, and can make your stylesheet messed up anyways, so using an IE7-only stylesheet through conditional comments could be a good idea.

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->

Inline block doesn't work in internet explorer 7, 6

In IE6/IE7, display: inline-block only works on elements that are naturally inline (such as spans).

To make it work on other elements such as divs, you need this:

#yourElement {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

*display: inline uses a "safe" CSS hack to apply to only IE7 and lower.

For IE6/7, zoom: 1 provides hasLayout. Having "layout" is a prerequisite for display: inline-block to always work.

It is possible to apply this workaround while keeping valid CSS, but it's not really worth thinking about, particularly if you're already using any vendor prefixed properties.

Read this for more information about display: inline-block (but forget about -moz-inline-stack, that was only required for the now ancient Firefox 2).

inline-block elements not showing in IE7

After some experimenting in JSFiddle I've managed to discover that the problem relates to this particular rule

.pagination .prev {text-indent:-9999px; } 

Disabling this fixes the issue but is not ideal as you would then have the text charecter appear on top of your background images.

Interestingly enough your .next does not cause the same issue. with that in mind added an   to either side of your paging control (so your center alignment dosnt get skewed) and it seems to of fixed the problem.

<div class="pagination"> 
      
    <a href="#" class="prev"><</a> <a href="#">1</a> <a class="current">2</a> <a href="#">3</a> <a href="#" class="next">></a> 
     
</div>

JSFiddle available here (background images replaced with solid colors for obvious reasons)

ie 7 doesn't work with CSS inline-block or fixes

Add:
position:relative; to div.dropdown ul li, get rid of the margins on div.dropdown ul li ul and set it's top:25px, left:-1px;, width:100%; finally, set div.dropdown ul li ul li to margin:0; delete the left-right padding, and set width:100% ...

I might have missed something, but here's a working example: http://jsfiddle.net/hjDVS/7/

I think your real problem was the absolutely positioned ul

Equivalent of div display inline-block for IE8, IE7 and older browsers

Here is a good resource that covers this topic: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

Basically IE has a trigger called "hasLayout". Triggering this will allow you to use display:inline-block on a block level element (by default IE only allows inline-block on native inline elements).

Additionally older version of Fire Fox didn't support inline-block either, but had an "inline-stack" value (moz-inline-stack).

Here is, to my knowledge, the best way to get a cross-browser display:inline-block:

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

CSS display: inline-block doesn't work in IE7

Far as I can tell, it's the "float: right" on the css for the label. Whatever you are doing, try doing it without setting the float: right on the label.

when I removed "float: right" it went back to inline on my IE.

CSS Display inline-block issue with IE

This link can help to solve it:
Cross-Browser Inline-Block

The very least you need to make inline-block work cross-browser (incl IE6/7) is:

.my-inline-block {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

You may need to fix additional quirks; details and explanations are in the link...

Why are inline-block elements not displayed correctly in Internet Explorer 8?

The old versions of IE don't understand the inline-block for block-level elements.

The reason why inline-block works for inline elements is because they did it so it triggers hasLayout. And the has layout for inline elements works exactly like an inline-block.

So, to make inline-block work with block-level elements, make them inline and somehow trigger the hasLayout, like, using zoom: 1.

So, for you code, there are two ways: change divs to spans, or add inline hacks (or move the code to external stylesheets and use conditional comments). The version with inline hacks would look like this:

<div style='width: 200px; border: 1px solid black;'>
  <div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'>
    asdfasdf<br />asdf
  </div>
  <div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'>
    asdfasdf<br />were
  </div>
</div>

IE7 - display: block a within li does not display correctly

This problem is caused by a rendering phenomenon in IE7 and lower known as hasLayout.

To fix the problem, you must simply prevent your a elements from "gaining layout".

Unfortunately, there's massive list of stuff that causes an element to "gain layout".

Your a elements currently have overflow: hidden and min-height set. If you remove those properties, it will work in IE7.

Equivalent of div display inline-block for IE8, IE7 and older browsers

Here is a good resource that covers this topic: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

Basically IE has a trigger called "hasLayout". Triggering this will allow you to use display:inline-block on a block level element (by default IE only allows inline-block on native inline elements).

Additionally older version of Fire Fox didn't support inline-block either, but had an "inline-stack" value (moz-inline-stack).

Here is, to my knowledge, the best way to get a cross-browser display:inline-block:

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

---

Related Topics