IE8 display inline-block not working

Question

Say I have the following code

<style type="text/css" media="all">
  span, ul, ul li {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0;
    list-style: none;
  }   
</style>
<span>i would want</span>
<ul>
  <li>this</li>
  <li>on</li>
  <li>one line.</li>
</ul>

I want this to display inline in IE8. Everywhere I have read everything says this should work, IE8 supports inline-block. However after a morning of trying I cant get the above to line up. I know I could float it, but with the other elements on my page (not shown here) I would need to use a 'clearfix' which is more mark up. I only need to target IE8 and would love to know why inline block doesn't work for me when apparently its supported. The above code does what I want when viewed in Google Chrome.

Best answer here: http://stackoverflow.com/questions/6703017/ie-display-inline-block — Marcus, Nov 30 '13 at 12:35

score 50 · Accepted Answer · answered Feb 02 '12 at 10:29

50

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.

answered Feb 02 '12 at 10:29

Patrickdev

2,341
1
21
29

3

I love you, this saved me a lot of IE-ache! – Iazel Mar 26 '13 at 02:51
Woah! Damn I forget this everytime – Chris Jan 28 '14 at 00:39
@Iazel You meant IE's-hit – Cristian E. Dec 11 '14 at 13:23
Thank you was worried I'd have to go scouring the web for an answer. – Javacadabra Mar 25 '15 at 14:18

score 37 · Answer 2 · edited Jul 30 '13 at 18:33

37

Not all IE8 versions seem to work equally. I found that the given code, even with a DOCTYPE, does not work in IE 8.0.6001.18702, which is an early version.

However, the workaround for lower IE versions did its job on that particular IE 8 as well:

<!--[if lt IE 8]>
<style type="text/css">
    li { display: inline; }
</style>   
<![endif]-->

edited Jul 30 '13 at 18:33

BoltClock

700,868
160
1,392
1,356

answered Feb 20 '12 at 22:48

cato_minor

663
6
11

This worked perfectly, I only added !important to override, it seems like inline is actually inline-block in IE. Thank You! – formatc Apr 05 '12 at 12:46
Randomly stumbled across this, worked for me, inline is indeed inline-block. Thanks – Samuel Jul 17 '12 at 14:49
Cool, this worked for me, I have the same problem, Windows 7 IE 8 and inline-block does not work – JorgeeFG Jul 25 '12 at 18:29
Exactly, the same for me! I have exactly the same version of IE and the DOCTYPE itself doesn't work. – Tomas May 09 '13 at 15:49
and please note that inline-block is supported by IE for inline elements - span, em, ... without these problems. Look here for more info: http://stackoverflow.com/a/16462251/684229 – Tomas May 09 '13 at 15:55
23

This only happens when IE8 is in Compatibility View, which is an IE7 emulation. It's not a problem of differing IE8 versions, but a problem of improper rendering modes. It's not surprising that this should happen even if a DOCTYPE is used since IE7 and earlier have always had this problem even if a DOCTYPE was used anyway. Furthermore, 8.0.6001.18702 is the RTM, not an early version, and even that isn't relevant because `display: inline-block` support was already complete starting from the first beta. The correct solution to this is `` – BoltClock May 09 '13 at 16:24

mentat · Answer 3 · 2013-05-07T13:40:58.410

18

You can set margin-right:1px

worked for me pretty well.

edited May 07 '13 at 13:40

answered Feb 24 '12 at 11:58

mentat

2,748
1
21
40

2

This is by far the best option out of all the answers. Great tip! – Abe Petrillo Nov 01 '12 at 19:05
removed the broken link (http://www.compsoft.co.uk/Blog/2009/11/inline-block-not-quite-inline-blocking.html) They seem to change their website and cannot find the post anymore. – mentat May 07 '13 at 13:41
3

[Web archive for the rescue](http://web.archive.org/web/20120224235209/http://www.compsoft.co.uk/Blog/2009/11/inline-block-not-quite-inline-blocking.html) – Kos Jul 02 '13 at 13:52
Don't you just love IE :-/ – Kevin Shea Oct 27 '15 at 15:59

score 13 · Answer 4 · answered Nov 14 '13 at 16:23

13

In my experience it is always a better idea to use the universal way (IE6+) of declaring an inline block. Even if you are targeting newer browsers every time I've tried to say that it's only supported by newer browsers some client still messes with their document type, and then the sales say, it needs to be fixed, because clients can still see it and does not get it, that it's down to their IE settings and not our fault. More over when you are using inline-blocks for structural stuff, it keeps the site from completely disintegrating if the user is viewing the site on an older IE for what ever reason.

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

answered Nov 14 '13 at 16:23

Idra

5,777
4
22
33

This is idiomatic! Just like `if (var i < 0; i y x.length; i++)` – yunzen Nov 22 '13 at 16:12
@HerrSerker Don't know what you mean by that, but this is how you get inline-block in a IE6+ manner (like it or not). – Idra Nov 22 '13 at 18:47
Yes, exactely what I mean. You should learn it as you learn the JS loop construct. – yunzen Nov 23 '13 at 12:01
18

“Idiomatic”, yet you wrote `if` instead of `for`… @HerrSerker – Ry- Nov 23 '13 at 20:08
There seems to be an error in the formula, the right one is: `display: inline-block; *zoom: 1; display: inline;` without a second "*". – Marcus Nov 30 '13 at 12:38
@Marcus the problem there is you are overwriting the display to pure inline. It should still work in IE7-, but every were else it should be simply inline. The `*` part is a IE7- hack i.e. this CSS property will be applied to only IE6 & IE7, but if you leave it out then it's read by all browsers making the element into a inline element and not a inline-block. If you wanted to you could leave the `*` on the `zoom: 1.0;` because the zoom is 1.0 anyway so if you reset it to 1.0 it does not matter. – Idra Nov 30 '13 at 12:52
Yeah you were right, the second "*" doesn't matter, so therefore +1 ;) – Marcus Nov 30 '13 at 13:18
1

I use `display: inline; display: inline-block; *zoom: 1;` -- IE will ignore the second display rule and zoom will only apply to older IE – Tom McKenzie Jun 16 '14 at 04:08

score 9 · Answer 5 · answered Nov 29 '12 at 22:53

9

IE8 will treat it as a block level element unless you use float.

.divInlineBlock
{
   display: inline-block;
   float: left;
}

answered Nov 29 '12 at 22:53

John Anastasio

159
2
4

score 5 · Answer 6 · edited May 23 '17 at 11:54

5

Note that IE8 will act like IE7 if you are viewing an intranet site, which can happen as you develop! See this StackOverflow question:

IE8 Rendering as IE7 By Default?

edited May 23 '17 at 11:54

Community

1
1

answered Feb 15 '13 at 00:06

Christopher

10,409
13
73
97

score 3 · Answer 7 · answered Aug 28 '12 at 18:04

3

For IE8 - you can add a specific declaration:

display: inline-table;

which works great.

answered Aug 28 '12 at 18:04

Jason

7,612
14
77
127

IE8 display inline-block not working

7 Answers7

Linked