1. 首頁
  2. 問答
  3. IE7：空白區域不起作用

IE7：空白區域不起作用

2015-06-23 80 views
0

我有一個無序列表。清單項目是inline-block。我不能也不會使用float:left，因爲我需要將它們垂直對齊。一切安好。整個佈局適用於除IE7之外的所有瀏覽器，它似乎在ul,IE Inspector上應用whitespace:nowrap;屬性，但並不真正應用它。當瀏覽器的寬度很小時，列表項仍然堆疊。IE7：空白區域不起作用

div#container { 
    display: inline-block; 
    *display: inline; 
    zoom: 1; 
} 
div#container > ul { 
    white-space:nowrap; 
} 
div#container > ul > li { 
    display: inline-block; 
    *display: inline; 
    zoom: 1; 
    vertical-align: bottom; 
}

無法發佈小提琴。因爲jsFiddle本身在IE7上不起作用。

來源

2015-06-23 Rex Overflow

+0

沒有幫助？ – user666

回答

2

IE7必須以符合標準的模式運行，以便CSS組合器正常工作。

您可以運行alert(document.compatMode);以查看您正在運行的模式。如果您收到BackCompat，那麼您正在以怪癖模式運行，並且CSS組合器將不起作用。如果您收到CSS1Compat，那麼IE7將以標準模式運行，並且CSS組合器將可以正常工作。

最簡單的方法是簡單地從你的CSS刪除組合子：

div#container { 
    display: inline-block; 
    *display: inline; 
    *zoom: 1; 
} 
div#container ul { 
    white-space:nowrap; 
} 
div#container ul li { 
    display: inline-block; 
    *display: inline; 
    *zoom: 1; 
    vertical-align: bottom; 
}

如果無法刪除組合程序，那麼你就需要use a doctype使IE7採用標準兼容模式。在我的測試中，將<!DOCTYPE html>添加到文檔的頂部在IE7中正常工作。

來源

2015-06-23 09:13:29

+0

我在我的頁面中有<<！DOCTYPE html'。另外，'document.compatMode'給出'CSS1Compat'。它似乎並沒有工作，但:( –

+0

@RexOverflow你是否嘗試刪除CSS combinators呢？當我刪除它，它完全適合我（即，看起來像IE瀏覽器相同的IE瀏覽器）。設置一個DOCTYPE也使它的工作對我來說很好。 –

相關問題

 相關問題