IE7 does not understand display: inline-block

Question

Can someone please help me get my head around this bug? With Firefox its working fine but with Internet Explorer 7 its not. It seems not to understand the display: inline-block;.

html:

<div class="frame-header">
    <h2>...</h2>
</div>

css:

.frame-header {
    height:25px;
    display:inline-block;   
}

What exactly to you to achieve? What effect? – Iladarsda Jul 01 '11 at 07:39 — Iladarsda, Jul 01 '11 at 07:39

kapa · Accepted Answer · 2012-08-22T08:49:07.697

302

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

edited Aug 22 '12 at 08:49

answered Jul 01 '11 at 07:42

kapa

77,694
21
158
175

40

I prefer `*zoom:1;` to triger hasLayout. So it's more clearly that the `*zoom` and `*display` go together – yunzen Nov 14 '12 at 12:25
http://www.w3schools.com/cssref/pr_class_display.asp the official W3c has not mentioned anything about ie7 - inline block – Roshan Wijesena Apr 12 '13 at 09:55
4

@RoshanWijesena w3schools has nothing to do with w3c and neither are authorities on ie7 – Musa Apr 14 '13 at 00:51
1

@RoshanWijesena w3schools is not a good resource and is not official at all. Do not depend on it. The fact that they mention or do not mention something does not really mean anything. – kapa Apr 16 '13 at 07:04
1

thanks Guys! so what should i used as a official documentation just wondering! – Roshan Wijesena Apr 16 '13 at 08:22
2

@RoshanWijesena You can find the offical standard specifications on http://w3.org, the official page of W3C. https://developer.mozilla.org is a great resource that you can use instead of w3schools as a reference. – kapa Apr 16 '13 at 08:59
@HerrSerker I put both rules on the same line with a comment. – NickG Aug 15 '14 at 12:41

yunzen · Answer 2 · 2014-08-25T10:26:25.783

Update

As nobody uses IE6 and 7 anymore I will present a different solution:
You don't need a hack anymore, because IE8 supports it by itself

For those who must support those stone age browsers before IE8 (It's not that the IE8 is that old, too cough):
For the account of IE version control, use some Conditional Class in <html>tag like Paul Irish states in his article

<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->

By this you will have different classes in html-tag for different IE Browsers

The CSS you need is as follows

.inline-block {
    display: inline-block;
}
.lt-ie8 .inline-block {
    display: inline;
    zoom: 1;
}

This will validate and you don't need an extra CSS file

Old answer

.frame-header
{
    background:url(images/tab-green.png) repeat-x left top;
    height:25px;
    display:-moz-inline-box;    /* FF2 */
    display:inline-block;   /* will also trigger hasLayout for IE6+7*/
}
/* Hack for IE6 */
* html .frame-header {
    display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}
/* Hack for IE7 */
* + html .frame-header {
    display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}

The CSS you show above makes sense but how exactly would that work into the HTML? Thanks. — StephenESC, Sep 13 '14 at 03:51
@StephenESC two ways. Add the class `inline-block` to the `frame-header` element. Or change `inline-block` by `frame-header` in the CSS selectors. — yunzen, Sep 13 '14 at 04:33

score 1 · Answer 3 · answered Jul 01 '11 at 07:29

1

IE7 does not support 'inline-block' properly, more info here: LINK
Use can use: 'inline' instead.

What exactly are you trying to achieve? Make us an example and put here: http://jsfiddle.net/

answered Jul 01 '11 at 07:29

Iladarsda

10,640
39
106
170

score 0 · Answer 4 · answered Mar 14 '13 at 05:32

0

use inline, it works with this kind of selectors for list items:

ul li {}

or to be specific:

ul[className or name of ID] li[className or name of ID] {}

answered Mar 14 '13 at 05:32

MiddleKay

319
4
13

2

`inline` is not the same as `inline-block`. For example, the `height: 25px;` in the example will not take effect when the element is `inline`. Also, the question says nothing about lists. – kapa Apr 25 '13 at 16:15

IE7 does not understand display: inline-block

4 Answers4

Update

Old answer

Linked

Related