CSS3圖像高度自動

在關於IE9測試jQuery Mobile的網站的過程中我發現，沿CSS3圖像高度自動

<img src=... width='100%' height='auto'/>

線的東西不與IE9工作 - 圖像顯示爲不高長的水平線。看起來IE似乎並不瞭解auto屬性，或者似乎將其解釋爲。將高度屬性完全排除在外訣竅 - 圖像顯示爲所需，這對所有其他瀏覽器來說似乎也沒問題。

問題解決了嗎？好吧，不完全是因爲這讓我感到有點混亂。我一直認爲指定圖像高度和寬度有助於瀏覽器渲染頁面，因爲它知道在獲取圖像之前需要爲圖像預留多少空間。因此，「忽略高度=自動」技巧意味着頁面渲染速度會減慢，因爲瀏覽器會延遲獲取其他頁面資源，直到它獲得了圖像數據並建立了未來的頁面佈局。

來源

2013-01-15 DroidOS

嘗試刪除'height'屬性並僅使用：''或更好地使用CSS來設置圖像樣式。 – wzazza

這與CSS完全無關。你是否混淆了CSS屬性的HTML屬性？ – BoltClock

你說得對。我把CSS放入我的標題中而沒有真正想到。我的意思是HTML屬性。也就是說，用height：auto定義一個CSS規則具有相同的IE效果 – DroidOS

「瀏覽器會延遲獲取其他頁面資源，直到它獲得圖像數據並建立了未來的頁面佈局？」是錯的。自從netscape以來，情況並非如此。事實上，這是netscape中的一個關鍵創新，即頁面將持續渲染，直到圖像被提取，尺寸確定並且頁面被簡單地「迴流」。

正如評論中所述。如果您不知道，請移除高度。將其設置爲自動不會以任何方式幫助瀏覽器。

來源

2013-01-15 04:42:15 basarat

謝謝。是否存在某個W3C規範文檔，用於確定瀏覽器在遇到類似此類情況時應該執行的操作？ – DroidOS

http://www.w3.org/TR/html51/embedded-content-0.html#attr-dim-height提及「用戶代理應該使用這些屬性作爲提示的提示。」瀏覽器如何處理這些提示留給人類邏輯。如果提供了固定大小，它們將映射到dimesion屬性:(來自http://www.w3.org/TR/html51/rendering.html#dimRendering）「Applet，嵌入，iframe，img，對象上的寬度和高度屬性或視頻元素以及在圖像按鈕狀態中輸入具有類型屬性的元素，分別映射到元素上的維度屬性「寬度」和「高度」。 – basarat

謝謝！ IE讓我感到震驚，不是第一次在這裏滑倒。而不是決定高度='自動'是沒有意義的，並等待它有足夠的數據來解決問題，它將它視爲0/1像素高度 – DroidOS

CSS3圖像高度自動

回答

相關問題