inline-block: Firefox 4 vs IE 9

2019-02-17 02:30发布

站内问答 / HTML/CSS
1851 4 6

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?

4条回答
干净又极端
2楼-- · 2019-02-17 02:58

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.

查看更多
0人赞 添加讨论(0) 举报
男人必须洒脱
3楼-- · 2019-02-17 03:05

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>
查看更多
0人赞 添加讨论(0) 举报
一纸荒年 Trace。
4楼-- · 2019-02-17 03:16

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 .

查看更多
0人赞 添加讨论(0) 举报
我欲成王，谁敢阻挡
5楼-- · 2019-02-17 03:22

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]-->
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)