IE9顯示行內塊div不正確

我有一個div div divs，我試圖創建一個幻燈片。我有孩子div顯示inline-block和一切看起來很好，除了在IE < = 9。在IE < = 9中，每個div.contentItem垂直顯示。IE9顯示行內塊div不正確

我使用，因爲更多的是異步添加div.contentItemwhite-space: nowrap和inline-block（而不是float:left），我不想在每次添加新的元素時重新計算div.content寬度。所以，出於這個原因，我寧願遠離float:left，除非有一種方法可以在不指定寬度的情況下使用float。

備註我無法更改文檔類型，因爲它位於母版頁上，並且由我們的cms中的許多其他頁面使用。太多的迴歸測試。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"> 
<head></head> 
<body> 
    <div class="content"> 
     <div class="contentItem">...</div> 
     <div class="contentItem">...</div> 
     <div class="contentItem">...</div> 
     <div class="contentItem">...</div> 
     <div class="contentItem">...</div> 
     <div class="contentItem">...</div> 
     <div class="contentItem">...</div> 
    </div> 
</body> 
</html>

CSS

.content { 
    white-space: nowrap; 
    margin-left: 256px; 
    position: relative; 
    padding-top: 14px; 
} 

.contentItem { 
    display: -moz-inline-stack; 
    display: inline-block !important; 
    *display: inline; 
    margin: 0 14px 0 0; 
    vertical-align: top; 
    zoom: 1; 
}

來源

2012-09-17 bflemi3

爲什麼不更改此頁面不使用文檔的DOCTYPE？它至少會讓你確認這是問題所在。 –

由cms管理員控制，所以我不能這樣做。 – bflemi3

我將div.contentItem更改爲span.contentItem。現在項目顯示內聯，並且不需要更改CSS。

來源

2012-09-19 20:04:03 bflemi3

-1

IE < = 8不完全支持display: inline-block。 Read here.

而不是使用inline-block，儘量採用此代碼到您的幻燈片： http://jsfiddle.net/9ACNT/

來源

2012-09-17 18:52:17 rogal111

但IE9確實並且由於某種原因當頁面加載進入IE9時兼容查看和文檔模式：IE7標準 – bflemi3

OP在IE9方面存在問題，並且該表無論如何都顯示IE 8+的完全支持。 –

可能基於我的文檔類型，但我不能改變， – bflemi3

直列塊是敏感的，當涉及到的空白，如果內容是完全一樣寬，它的父它可能會打破並轉到下一行..也許你需要像這樣

<body> 
    <div class="content"> 
     <div class="contentItem">...</div><div class="contentItem">...</div><div class="contentItem">...</div> 
    </div> 
</body>

來自各地的內聯元素刪除所有空白應該讓他們正是你想要的大小他們是

來源

2012-09-17 18:53:42

我會遠離任何計劃，這取決於你如何組織你的代碼。 – Sparky

What @ Sparky672說。 *特別是*使用模塊化CMS時，系統中散佈的碎片可以構建頁面。 –

如果您將white-space: nowrap保留在您的父母div上，那麼您應該可以在子女上使用float: left，而無需爲父母定義寬度。

看到這個Fiddle illustration我之前爲另一篇文章做過。它也適用於此。您可以調整結果窗口的大小，以查看white-space設置爲nowrap（無論是浮動塊還是內嵌塊）的兩個版本都始終保持在一行上。

來源

2012-09-17 18:56:01 Scrimothy

嗯，我明白你在做什麼，但它不適合我。必須有導致問題的另一個因素。 – bflemi3

嘗試'浮動'你的父母'''（小提琴]（http://jsfiddle.net/scrimothy/MnHQh/）） – Scrimothy

是的，試過，仍然沒有工作 – bflemi3

IE9顯示行內塊div不正確

回答

相關問題