「身高：1」奇蹟般地使一切在Chrome和IE中工作。無法找到替代解決方案

-2

因此，我正在嘗試製作四個高度相同的列。應該有一些填充物，在視覺上它們應該以相同的高度來看。「身高：1」奇蹟般地使一切在Chrome和IE中工作。無法找到替代解決方案

試驗不同的解決方案我發現一些奇怪的事情發生時，其中一個div的「高度：1」。由於這不是有效的CSS，據我所知，'自動'的默認值應該給予div。但它不會顯示與'auto'值相同的值。

由於我沒有得到「身高：1」在jsFiddle中工作，這裏是JsBin鏈接：JsBin。

我來到這裏得到兩件事情的信息：

如果不知何故，我能得到內內格「顯示：表細胞」是高度：100％，那麼問題可能會得到解決。

問題是由缺少文檔類型導致的怪癖模式。它沒有在jsFiddle中工作，因爲jsFiddle總是添加一個文檔類型。 jsBin允許您指定包括文檔類型在內的整個HTML代碼，因此您可以將其忽略掉，因此您可以重現該問題。 – Spudley

它的工作原理是因爲頁面沒有<!DOCTYPE html>。 Chrome和IE都進入怪異模式，其中height:1是有效的CSS（對於height:1px），並以某種方式修復您的佈局在怪癖模式。

解決方案：將<!DOCTYPE html>添加到您的文件的開頭，然後從那裏開始。

2013-09-21 15:33:35

謝謝！我以前從來沒有聽說過這種怪癖模式。下次發生這種奇怪的事情時，我知道我可能再次忘記了文檔類型。還發現了一種可能的佈局解決方案。向「display：table」div添加了border-spacing：20px。 –

回答