Equivalent of div display inline-block for IE8, IE7 and older browsers
Solution 1
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;
Solution 2
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!
Related videos on Youtube
Admin
Updated on September 01, 2020Comments
-
Admin over 3 years
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
-
BoltClock over 11 yearsIE8 does support
display: inline-block
. -
Tomas almost 11 years@BoltClock, exactly, for inline elements, see my answer.
-
BoltClock almost 11 years@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 - msdn.microsoft.com/en-us/library/hh781508.aspx#positioning -
Tomas almost 11 years@BoltClock, I repeat once more, that inline-block doesn't work for all versions of IE8. Did you read the post I linked above?
-
Tomas@BoltClock, nope. Maybe for some IE8 versions and some DOCTYPEs, but in general no. Look here. 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.
-
-
Admin over 11 yearsThat's fantastic. It was the hasLayout trigger that was missing in my code. Thanks very much.
-
Joel Kinzel over 11 yearsNo problem. hasLayout has gotten me more times than I can count.
-
Tomas about 10 yearsLink only answer is never a good answer - see meta.stackexchange.com/q/8231/166308. Put the key information here.
-
Joel Kinzel about 10 years@Tomas, I've added some example code and some additional info.
-
Tomas about 10 yearsOK, that's much better! :-) That would make it more general than my answer, where I recommend to resort to using
<span>
. But what exactly in your code above triggers the IE's hasLayout? -
Joel Kinzel about 10 years
zoom:1
will trigger it for IE6/7. Anything other thanzoom:normal
should as well. There are other ways to trigger it as well, butzoom:1
is the most common that I've seen. Here is more info on the hasLayout trigger/property in IE: satzansatz.de/cssd/onhavinglayout.html -
Ricky Jiao over 9 yearsIt seems IE8 doesn't support star(*) hack.
-
Joel Kinzel over 9 years@RickyJiao, IE8 doesn't need the star hack. It supports
inline-block
. See: caniuse.com/#feat=inline-block