無法在DOCTYPE設置（火狐），以寬/高設置爲IMG

想象一個固定大小三幅影像：無法在DOCTYPE設置（火狐），以寬/高設置爲IMG

<!DOCTYPE html> 
<html> 
    <head> 
    <style type="text/css"> 
     div.photos img { 
      width: 320px; 
      height: 240px; 
      background-color: black; 
     } 
    </style> 
    </head> 
    <body> 
    <div class="photos"> 
     <img src="abc" /> 
     <img src="def" /> 
     <img src="ghi" /> 
    </div> 
    </body> 
</html>

當你look at such page在IE或Chrome，你會看到我的預期 - threee具有固定尺寸的圖像。
然而，在Firefox中，它不起作用。

但是，如果我將圖像設置爲display: block;或刪除DOCTYPE（不顯示在jsfiddle上）它的工作原理。

我在做什麼錯？
感謝

來源

2012-07-24 Czechnology

在Firefox 14上使用對真實圖像的引用代替abc，def，ghi，測試您的代碼並不會出現這樣的問題。請說明「不起作用」的含義，您在測試中使用的Firefox版本以及您使用的確切代碼（包括對可用映像的參考）。您的jsfiddle與附帶的代碼不同，並且不涉及實際的圖像，因此它演示了在指定地址的圖像不存在的情況下（瀏覽器已知可以處理不同的東西）會發生什麼。 – 2012-07-24 20:19:44

@ JukkaK.Korpela，那就是問題所在 - 這就是爲什麼我將尺寸設置爲圖像的原因，以便設計在加載失敗時不會中斷。「瀏覽器被認爲可以處理不同的東西」 - 好吧，這並不是我所熟知的，所以我正在尋找爲什麼以及哪種行爲應該被認爲是正確的原因。 – Czechnology 2012-07-26 18:43:20

感謝您的澄清，我雖然是關於圖像的適當，但它是關於圖像不可用時的渲染。 – 2012-07-26 19:29:14

這似乎是Firefox中的一箇舊功能：我從2007年起發現了一個關於它的discussion：

所以我認爲這是故意的並且不會消失。我猜他們可能會這樣想：如果您在圖片上設置尺寸，那麼一切都很好，我們會對其進行縮放。但是，如果圖像丟失，我們將渲染替代文本，而這會將img元素從替換的內聯元素更改爲文本，這是一個未替換的內聯元素，對此我們將不支持height和width ，由規格。相反，文本決定了尺寸。據推測，Firefox的作者認爲這是正確的做法，只有在Quirks Mdoe他們是否像其他瀏覽器一樣做。

如果您添加alt屬性（因爲您應該，每個img應該有一個），您將看到方框大小如何隨文本長度而變化。顯然Firefox在這裏將缺少的alt等同於alt=""，意味着零寬度。

這可以解釋爲什麼設置display到inline-block（或block）改變行爲：然後width和height應用。

來源

2012-07-26 19:39:40

我從來沒有面對這個問題，我想知道爲什麼 – 2012-07-26 19:41:33

@ JukkaK.Korpela，感謝您的鏈接和您的想法;） – Czechnology 2012-07-26 21:05:51

@先生alien，我既沒有，我已經很長時間webcoding了。取決於你如何使用你的圖像。就我而言，在作爲頁面設計一部分的迷你畫廊中，尺寸正確的空圖像比縮小的邊框要好。 – Czechnology 2012-07-26 21:08:29

我認爲Firefox的不會是運用高度和寬度<img>元件，它是空的，因此它必須呈現這樣的，所以使用CSS display: block;

這裏是我的fiddle

或者使用圖像看看...

更新時間：fiddle

來源

2012-07-24 19:29:50

謝謝，但我已經「理解」，但爲什麼和爲什麼刪除文檔會改變行爲？爲什麼只有Firefox？這是正確的行爲還是錯誤的行爲？（介意你，這裏的解決方法很明顯，我試圖瞭解爲什麼ff的行爲是這樣的） – Czechnology 2012-07-24 20:12:03

@Czechnology doctype將規則設置爲你的html元素，所以當使用doctype時，Firefox會說oo它的doctype html，所以它會呈現相應的標記。 – 2012-07-24 20:14:56

修復不是那麼明顯，它應該是'display：inline-block'，以使這些框並排排列，而不是垂直排列。 – 2012-07-26 19:22:52

無法在DOCTYPE設置（火狐），以寬/高設置爲IMG

回答

相關問題