Ie8 Display Inline-Block Not Working

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.

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>

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.

Inline-block isn't working with ie8?

Try this:

#nav_arrow {
    display: inline;
    zoom: 1;
}

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;

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?

Ie8 Display Inline-Block Not Working