IE顯示內嵌塊

所以我在做，像這樣IE顯示內嵌塊

<div style='width: 200px; border: 1px solid black;'> 
    <div style='display: inline-block; width: 70px; border: 1px solid green;'> 
    asdfasdf<br />asdf 
    </div> 
    <div style='display: inline-block; width: 70px; border: 1px solid green;'> 
    asdfasdf<br />were 
    </div> 
</div>

現在，在Firefox和Chrome它顯示得很好，但在Internet Explorer 8中事實並非如此。他們有佈局，所以不是問題，並且寬度足夠小，因此它適合於一條線。

如果我使用範圍的，而不是它的工作，但是我真的很想konw爲什麼div的不」工作在IE

來源

2011-07-15 csteifel

您的文件是否有文檔類型聲明？ – BoltClock

你是什麼意思「它不起作用？」你期望的效果是什麼？ – Kyle

Ahhh ok我的HTML 4已經聲明，因爲它是一個非常老的頁面，而不是XHTML或HTML5 – csteifel

IE的舊版本不瞭解inline-block塊級元素。

inline-block適用於內聯元素的原因是因爲他們這樣做，因此它觸發了hasLayout。並且內嵌元素的佈局工作原理如下，如inline-block。

因此，要使inline-block與塊級元素一起工作，請使它們內聯並以某種方式觸發hasLayout，例如使用zoom: 1。

因此，對於您的代碼，有兩種方法：將div s更改爲span s，或添加內聯hacks（或將代碼移至外部樣式表並使用條件註釋）。內聯黑客的版本是這樣的：

<div style='width: 200px; border: 1px solid black;'> 
    <div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'> 
    asdfasdf<br />asdf 
    </div> 
    <div style='display: inline-block; width: 70px; border: 1px solid green;*display:inline;zoom:1;'> 
    asdfasdf<br />were 
    </div> 
</div>

來源

2011-10-01 21:08:37 kizu

Win XP下的IE8無法使用CSS hack。 – Piero

IE < 8不能切換，默認情況下，以inline-block元素block元素。無論您嘗試多麼努力，除非您使用float IIRC，否則他們將始終保持block。

在你的例子中，似乎你不需要使用<div>。如果是這種情況，爲什麼不使用<span>或默認爲inline的元素。否則，floating就是答案。

來源

2011-07-15 10:29:06 Mig

這是不正確的。 IE8理解_inline-block_顯示模式就好了。但IE7完全不知道這種模式。儘管可以通過將顯示設置爲_inline_並強制該元素的佈局（例如_zoom_屬性）來模擬_inline-block_行爲。 – oddy

就這樣。 IE8似乎可以與'inline-block'正常工作，我會更新我的答案。 – Mig

IE8與內聯塊一起工作良好，直到您開始在內聯塊內隱藏/顯示會導致父容器增大或縮小的元素爲止。 – ScubaSteve

試試這個

<style type="text/css"> 
.one { 
    width: 200px; 
    border: 1px solid black; 
} 
.two { 
    display: -moz-inline-box; 
    display: inline-block; 
    width: 70px; 
    border: 1px solid green; 
} 
* html .two { 
    display: inline; 
} 
* + html .two { 
    display: inline; 
} 
</style> 
<div class="one"> 
    <div class="two"> 
    asdfasdf<br />asdf 
    </div> 
    <div class="two"> 
    asdfasdf<br />were 
    </div> 
</div>

來源

2011-09-28 15:54:47 HerrSerker

更改文檔類型工作了IE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

來源

2013-09-18 15:15:15 user2792101

display: inline-block; *zoom: 1; *display: inline;

您可以添加inline-block的其他瀏覽器，但IE瀏覽器，你可以用*添加樣式。它只適用於即

來源

2014-02-15 15:55:31 GeniusJRS

回答

相關問題