html5垂直間距問題與<img>

我想創建一個佈局，divs之間的垂直間距是像素完美。到目前爲止，我已經排除了幾乎所有的大型網格系統（960.gs，Blueprint），因爲它們在垂直間距方面根本沒有解決方案。有了它們，設置div之間垂直間距的唯一方法是使用body {line-height}屬性並使用它來操作div間距。我不會稱之爲解決方案，因爲它會毀壞您的模板，取決於font-family，並且不會讓您爲不同的div使用不同的間距。html5垂直間距問題與<img>

我發現的唯一一個對垂直間距有適當支持的網格系統是Golden Grid，它不使用body {line-height}，但是它有自己的.clear {height：5px}用於垂直間距。

我的問題是，無論我如何努力，我不能讓在HTML5間距工作。我正在談論垂直排列的圖像，它們之間沒有間隙。在XHTML過渡模式下，一切正常，圖像完美對齊，但在HTML5模式下，它們之間存在垂直差距。 Chrome瀏覽器的差距爲2px，Firefox瀏覽器的差距爲2-3px，兩行之間交替。我認爲在HTML5模式下使用每個網格系統都是這種情況。我不知道用簡單的HTML5編寫代碼的最佳方式是什麼，所以我只是嘗試了網格系統。縱向差距也存在於960.gs，Blueprint中。

溶液我發現可能是設置體{行高：0}和在每一個印刷標記來定義行高。但我不明白爲什麼如此簡單的案例需要這樣的黑客攻擊：垂直排列的圖像。爲什麼瀏覽器在HTML5模式下與XHTML Transitional模式不同？

在這裏，我有相同的頁面，沒有什麼改變，只是文檔類型。 XHTML在每個瀏覽器中都是像素完美的，HTML5則有差距，並且不同於瀏覽器。

是什麼力量讓像XHTML過渡的一個例子HTML5工作的最佳方式？

UPDATE：thirtydot回答了這個問題，如果我包括img {display：block; } HTML5版本的行爲與XHTML Transitional完全相同。謝謝你，三十！

但關閉此線程之前，它爲什麼能有人向我解釋：

爲什麼所有的瀏覽器行爲不同HTML5模式，都有IMG元素之間不同的垂直間隙時未指定爲顯示：塊。瀏覽一下瀏覽器比較網站上面的html5鏈接，它會不同於瀏覽器到瀏覽器。他們有2至4像素之間的差距。
爲什麼XHTML過渡不需要這個破解
爲什麼嚴格的XHTML產生垂直間隙過
是可以安全使用IMG {顯示：塊; }在一個reset.css表？

來源

2011-02-05 zsero

爲什麼所有的瀏覽器在HTML5模式下表現不同，並且當img元素之間的垂直間距不同時，如果沒有指定爲display：block？

首先，瀏覽器沒有「HTML5模式」。他們有三種模式：「怪癖」，「有限的怪癖」（又名幾乎標準）和「標準」模式。「限制怪癖」和「標準」模式之間只有一個區別，並且這與<img>所在線框的線高和基線建立方式有關。在「有限怪異」模式下，如果線上沒有渲染的文本內容，則不會建立基線，並且<img>位於線框的底部。

在「標準」模式下，即使在該線框中沒有真正的字符，線框始終包含像基線下方的g，p和y這樣的字符下移的空間。您看到的間隙是基線與線框底部之間的距離，這是下降者的空間。進行徹底的描述，請參見http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29

補救措施，那麼，要麼停止<img>被當作內聯元件{ display:block; }或重寫的<img>{ vertical-align:bottom; }垂直取向。要麼會工作。

爲什麼XHTML過渡不需要這個破解

使用XHTML過渡DOCTYPE瀏覽器放入「有限怪癖」模式。如果您使用了XHTML Strict或完整的HTML4嚴格文檔類型，那麼您將看到與HTML5文檔類型相同的差距，因爲它們都將瀏覽器置於「標準」模式。

爲什麼嚴格的XHTML產生垂直間隙過

見上面。

是否安全使用img {display：block; }在一個reset.css表？

當然，但可能有些時候你會想要<img>被視爲內聯元素。在這些情況下，您需要在相應的位置添加CSS來實現此目的。

來源

2011-02-05 11:37:26 Alohci

我覺得這不可能是你正在尋找的答案。太短了：

添加到您的HTML5頁面的CSS：img { display: block }。

測試在Firefox和Chrome，這樣做，得到您的兩個頁面之間像素完美呈現相同。

來源

2011-02-05 02:13:11 thirtydot

你是對的，它解決了我的問題。我到處尋找HTML5特定的問題，但我錯過了最基本的一個。 – zsero 2011-02-05 02:39:50

試試這個代碼：

<html> 
<head> 
<style> 
div, span { border:1px dotted; height:100px; width:100px; } 
</style> 
</head> 
<body> 
    <span>100px</span> 
    <div>100px</div> 
</body> 
</html>

當你考慮<img>就像<span>內聯元素......我覺得你的大部分問題的回答。

沒有寬度/高度屬性，您對每個瀏覽器渲染引擎的依賴性都是相同的（它們不是）。因此，只有在告訴瀏覽器需要使用多少個像素之後，像素纔會起作用。

來源

2011-02-05 03:45:31 Dawson

w3schools的CSS教程並沒有接近正確地描述這個問題，這可能就是爲什麼它在StackOverflow上經常出現。請不要將人員轉介給w3schools，因爲它的信息往往是錯誤的。看到http://w3fools.com – Alohci 2011-02-05 12:02:29

採取點。編輯。 – Dawson 2011-02-05 16:38:11

vertical-align: baseline正在造成圖像底部的空隙。

在嚴格的文檔類型中，圖像是內聯元素，其行爲與文本類似。即使沒有任何文本，將基線上的內聯元素對齊也會導致它們爲文本下劃線留出空間。

將img { vertical-align: bottom }添加到您的重置樣式表將解決該問題。

來源

2011-02-05 14:47:41 Emily

html5垂直間距問題與<img>

回答

相關問題