inline-block：Firefox 4 vs IE 9

我很困惑，爲什麼IE9以驚人的方式解釋了這樣一個基本的行爲。在Firefox 4或Chrome 11中，我發現divs並不像我所期望的那樣並排顯示。不過在IE9中，我看到了divs出現在另一個之下。inline-block：Firefox 4 vs IE 9

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

我相信IE9是符合標準的，所以我錯過了什麼？

任何幫助，將不勝感激！

更新：哇，這是離奇的。我以前沒有DOCTYPE聲明。當我在頁面頂部添加 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">時，IE9就可以正常工作，就像Firefox和Chrome一樣。任何想法是什麼？

來源

2011-03-30 Alexandre

有多寬的集裝箱'div'？ – alex 2011-03-30 06:38:26

可能你有檢查這個http://stackoverflow.com/questions/635851/support-for-border-radius-in-ie – sandeep 2011-03-30 07:01:07

對於這個例子，只要頂部div大於20em，你可以看到這個奇怪的不一致。 – Alexandre 2011-03-30 07:17:21

我能想到的唯一的事情就是IE9使用兼容性視圖（類似，如果我沒有錯IE7渲染引擎）來渲染頁面。如果關閉兼容性視圖，您會看到這些框按預期水平堆疊。

只有IE8和更新版本才能完全支持display: inline-block。 IE7及更早版本將它應用於默認內聯的元素（如span），而不適用於任何其他元素（如li或div）。因此，您的塊元素仍顯示爲塊，而不是內嵌塊。

更新：哇，這是離奇的。我以前沒有DOCTYPE聲明。當我在頁面頂部添加<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">的那一刻，IE9就可以正常工作，就像Firefox和Chrome一樣。任何想法是什麼？

很簡單：在添加doctype聲明之前，IE9在quirks mode中呈現。在怪癖模式中，IE會像在舊版本中那樣對待display: inline-block，正如我在上面的段落中所解釋的那樣。通過使用doctype聲明，IE9將在標準模式下呈現，並按照預期呈現您的樣式。

來源

2011-03-30 07:45:19 BoltClock

嘗試以下操作它的工作原理...

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

來源

2011-03-30 06:41:25 Jitesh

謝謝你的幫助。儘管我的問題更多地與內聯塊有關。我不明白爲什麼IE9會選擇將內部div放在另一個之下。我認爲*內嵌*塊的核心效果是這些塊將被放置在另一個旁邊而沒有換行。 – Alexandre 2011-03-30 07:20:54

是的，IE 9和顯示器有一些問題：inline-block。如BoltClock所解釋的，可以通過Compatibility lebel來避免。我的建議是使用浮動：左，而不是顯示：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>

你可以找到更多關於Div side by side in one line。

來源

2012-10-17 13:56:27 Markweb

得到它的工作沒有DOCTYPE（添加它不是在我的控制），我不得不使用下面的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]-->

來源

2013-04-26 23:02:54 sreek

inline-block：Firefox 4 vs IE 9

回答

相關問題