inline-block: Firefox 4 vs IE 9

Question

I'm confused why IE9 interprets such a basic behavior in a surprising way. In Firefox 4 or Chrome 11 I see that the divs appear side by side as I would expect. In IE9 though, I see the divs appearing one under the other.

<div style='border: black solid 1px'>
   <div style='display: inline-block; width: 10em; height: 1em; background-color: red'>
      block one
   </div>
   <div style='display: inline-block; width: 10em; height: 1em; background-color: green'>
      block two
   </div>
</div>

I'm confident IE9 is standards compliant, so what am I missing?

Any help would be appreciated!

UPDATE: Wow, this is bizarre. I had no DOCTYPE declaration before. The moment I add <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> at the top of the page, IE9 works fine, just like Firefox and Chrome. Any ideas what it was going before?

may be you have check this http://stackoverflow.com/questions/635851/support-for-border-radius-in-ie — sandeep, Mar 30 '11 at 07:01
For this example, as long as the top div is larger than 20em, you can see this weird inconsistency. — Alexandre, Mar 30 '11 at 07:17
@boltclock , if you check that link .You can saw "kevin" suggest a meta tag for ie9 .So, that's why i give that link may it's slove alexandre problem — sandeep, Mar 30 '11 at 07:53

BoltClock · Accepted Answer · 2012-06-20T17:39:27.703

The only thing I can think of is that IE9 is using Compatibility View (similar to IE7's rendering engine if I'm not wrong) to render your page. If you turn off Compatibility View, you'll see that the boxes stack horizontally as expected.

Only IE8 and newer have full support for display: inline-block. IE7 and older apply it to elements that are inline by default (like span) and not to any other elements (like li or div). As a result, your block elements still display as blocks, not inline blocks.

UPDATE: Wow, this is bizarre. I had no DOCTYPE declaration before. The moment I add <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> at the top of the page, IE9 works fine, just like Firefox and Chrome. Any ideas what it was going before?

That's easy: before you added your doctype declaration, IE9 was rendering in quirks mode. In quirks mode, IE treats display: inline-block just like it did in older versions, as I explain in the above paragraph. By having a doctype declaration, IE9 will render in standards mode, rendering your styles as expected.

score 0 · Answer 2 · answered Oct 17 '12 at 13:56

Yes, there are some problems with IE 9 and display: inline-block. It can be avoided with Compatibility lebel as BoltClock explain. My advice is to use float:left instead of display: inline-block

 <div style='border: black solid 1px'> 
       <div style='float:left; width: 10em; height: 1em; background-color: red'> 
          block one 
       </div> 
       <div style='float:left; width: 10em; height: 1em; background-color: green'> 
          block two
       </div> 
    </div>

You can find more about Div side by side in one line .

score 0 · Answer 3 · answered Apr 26 '13 at 23:02

To get it working without DOCTYPE (adding it is not in my control ) i had to use the following css

<style type="text/css">
        #myulid li{
            display: inline-block;
            width: 100px;
            margin: 10;
            text-align:center;
            vertical-align: top;
        }
    </style>

    <!--[if IE]>
    <style type="text/css">
        /* css for IE */
        #myulid{
            display: block;
        }
        #myulid li{
            display: inline;
        }
    </style>
    <![endif]-->

score 0 · Answer 4 · answered Mar 30 '11 at 06:41

0

Try the following it works...

<div style='border: black solid 1px;display:inline'>
   <div style='display: inline; width: 10em; height: 1em; background-color: red'>
      block one
   </div>
   <div style='display: inline; width: 10em; height: 1em; background-color: green'>
      block two
   </div>
</div>

answered Mar 30 '11 at 06:41

Jitesh

1,384
10
20

Thanks for you help. My question was more related to inline-block though. I couldn't understand why IE9 would chose to place the inner divs one under the other. I thought the core effect of *inline*-block was that the blocks would be placed one next to the other without a new line. – Alexandre Mar 30 '11 at 07:20

inline-block: Firefox 4 vs IE 9

4 Answers4

Linked