8

This is a fairly generic question about cross-browser compatibility.

At various points in a design I'm currenly working on the only way to achieve the layout and style that I want (without resorting to using images) is to use the display:inline-block css style option. However, this is not supported by IE8 and other older browsers and this results in my design beign broken.

So there are two parts to my question 1 - Is there a method of achieving a similar or equivalent effect for IE8? 2 - If not, how best can I make my design degrade smoothly?

For your reference, here's an example of where this is being used in my design.

<div style="width:20px; height:20px; display:inline-block; background-color:rgb(200,120,120); margin-right:10px;"></div>Direct

It is a 20x20 pixel colour block to explain the colours in a chart.

More generally this issue arises whenever I want greater formatting & layout control over a particular bit of text etc within a body of text.

In the design I'm currently working on I'll be dropping support for the older browser types anyway since it's heavily reliant on the canvas element. However, I thought this would be a good question to ask as I've come across the problem several times before.

Thanks

  • 3
    IE8 does support `display: inline-block`. – BoltClock Sep 24 '12 at 14:37
  • 1
    @BoltClock, exactly, for inline elements, see my answer. – Tomas May 09 '13 at 12:54
  • @Tomas: No, IE8 supports it for all elements. That's what I was saying in my original comment. – BoltClock May 09 '13 at 14:01
  • 1
    @BoltClock, nope. Maybe for some IE8 versions and some DOCTYPEs, but in general no. [Look here](http://stackoverflow.com/a/9369621/684229). Why would all these people look for solutions if it worked? :) Also, look at the article I cite in my answer. And please support your claims by linking appropriate resources. – Tomas May 09 '13 at 15:51
  • @Tomas: The article you cite, which is the exact same one that is linked in the accepted answer, was published in 2007 - IE8 did not even exist back then, so it is invalid. – BoltClock May 09 '13 at 16:20
  • @BoltClock, ok, one of my resources is invalid (the second one posted above is still ok). Where are the resources to support your controversal (in the light of this question and similar problems) claim? – Tomas May 09 '13 at 20:33
  • 2
    @Tomas: I don't see how any of this is "controversial" - it's a very well-known and undisputed fact that IE8 supports `display: inline-block` fully. The other answer is the result of an unfortunate source of confusion and not actually an issue with IE8 - I've already commented there. As for sources, I'll simply point you to MSDN - http://msdn.microsoft.com/en-us/library/hh781508.aspx#positioning – BoltClock May 10 '13 at 01:37
  • 4
    @BoltClock, I repeat once more, that inline-block doesn't work for all versions of IE8. Did you read the [post I linked above](http://stackoverflow.com/questions/9110646/ie8-display-inline-block-not-working/9369621#9369621)? – Tomas May 12 '13 at 15:41
  • possible duplicate of [IE display inline block](http://stackoverflow.com/questions/6703017/ie-display-inline-block) – Sergey K. Feb 15 '14 at 16:33

4 Answers4

10

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;
Joel Kinzel
  • 969
  • 2
  • 7
  • 19
  • 1
    That's fantastic. It was the hasLayout trigger that was missing in my code. Thanks very much. –  Sep 24 '12 at 14:58
  • No problem. hasLayout has gotten me more times than I can count. – Joel Kinzel Oct 29 '12 at 03:06
  • Link only answer is never a good answer - see http://meta.stackexchange.com/q/8231/166308. Put the key information here. – Tomas Feb 10 '14 at 19:16
  • @Tomas, I've added some example code and some additional info. – Joel Kinzel Feb 17 '14 at 18:00
  • OK, that's much better! :-) That would make it more general than my answer, where I recommend to resort to using ``. But what exactly in your code above triggers the IE's hasLayout? – Tomas Feb 17 '14 at 18:11
  • `zoom:1` will trigger it for IE6/7. Anything other than `zoom:normal` should as well. There are other ways to trigger it as well, but `zoom:1` is the most common that I've seen. Here is more info on the hasLayout trigger/property in IE: http://satzansatz.de/cssd/onhavinglayout.html – Joel Kinzel Feb 17 '14 at 18:47
  • It seems IE8 doesn't support star(*) hack. – Ricky Jiao Sep 25 '14 at 04:16
  • @RickyJiao, IE8 doesn't need the star hack. It supports `inline-block`. See: http://caniuse.com/#feat=inline-block – Joel Kinzel Sep 26 '14 at 21:38
4

As given here:

IE supports inline-block, but only for elements that are natively inline. So, if you really want to use inline-block, you’re restricted to spans and strongs and ems...

Yes, it is not logical, because normally it doesn't matter if you use div or span... but remember - this is IE :)

So just change <div> to <span> and that's it!

Tomas
  • 57,621
  • 49
  • 238
  • 373
0

use this code

*display: inline;
*vertical-align: middle;
Baz
  • 36,440
  • 11
  • 68
  • 94
Web Designer cum Promoter
  • 1,334
  • 14
  • 26
0
  display: inline-block; 
  *zoom: 1; 
  *display: inline;

you can add inline-block for other browser but for IE you can add style with *. it only works in ie

Mo.
  • 26,306
  • 36
  • 159
  • 225
GeniusJRS
  • 119
  • 2
  • 6