Why Are Inline-Block Elements Not Displayed Correctly in Internet Explorer 8

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>

IE8 display inline-block not working

I'm guessing you haven't declared a doctype. Try placing this on the first line, before the html tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The code you pasted works in IE8 with that doctype.

Internet Explorer 8 doesn't apply display inline and block correctly

There was nothing in doctype, nor in property values. Set styles with jquery instead of css file helps.

Why the page displays differently in IE8 and in chm (CSS display: inline-block issue)

I find the answer finally. A post at west-wind.com tells me that I need to do a registry hack to have CHM reader(hh.exe) use IE8 rendering mode, otherwise, hh.exe uses at most IE7.

The registry hack is: Save the following code to a .reg file, then double click to import into registry.

REGEDIT4

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION]
"hh.exe"=dword:00001f40

OK. At least there is a solution for IE8 M$ system.

This question is related to Will the IE9 WebBrowser Control Support all of IE9's features, including SVG?

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;

inline-block not working with IE8

Okay, after a lot of faffing around (I have to log out of the website to test, then log back in EVERY time I make a change, to see if it works...don't ask :( ) I've finally fixed it.

I changed:

#accordion .foobar .foo {
    display:inline-block;
    width:180px;
    height:125px;
    vertical-align:top;
    margin-right:10px;

to:

#accordion .foobar .foo {
    display:inline-block;
    float:left;
    width:180px;
    height:125px;
    vertical-align:top;
    margin-right:10px;

Adding the "float:left;" to the image fixed this problem.

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]–->

IE CSS display: inline-block Rendering issue

Add DOCTYPE to your html,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

It works for me after I added this.

Note: in jsFiddle, DOCTYPE was automatically generated so it will work there.

Edit 1:
Check this for more information,

Edit 2:
You can read more about inline-block styling here

IE8 overlaps inline-block elements in a floated div

Since I didn't find a way to have inline-block behave as expected, I finally resorted to float the span. Something of this sort:

<!DOCTYPE html> 
<html> 
<head>           
 <title>Home Page</title> 
 <style>
  div {
    float: right;
  }
  span {
    display: inline-block;
    float: left;
  }
  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }
 </style>
</head> 
<body>
  <div>
    <span>Labello 1</span>
    <span>Long Label 2</span>
    <span>Labellebleue 3</span>
    <span class="clearfix"></span>
  </div>
</body>
</html>

It works both in my simplistic example and in my particular use case.

But I am still interested in finding out why my original example does not work, even when applying the "cross-browser inline-block" suggested by Chankey!

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/

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;

Why Are Inline-Block Elements Not Displayed Correctly in Internet Explorer 8