在IE8中被壓縮的圖像

我在一個新的網站上工作，http://blgz.co/，出於某種奇怪的原因，我所有的圖像都被擠壓了!!!!!。我花了幾個小時試圖解決問題無濟於事。任何幫助將是偉大的！謝謝。在IE8中被壓縮的圖像

2012-02-28 George Milonas

想不通爲什麼你要添加的最大寬度聲明全局img標籤。刪除和所有的圖像通常會流向：

img { 
    height: auto; 
    max-width: 100%; /* remove */ 
}

來源

2012-02-28 18:22:29

它是「基礎」主題的一部分....謝謝！ – 2012-02-28 22:46:15

它也是Bootstrap 2的一部分，它們固定在3 :) – miguelmpn 2015-08-05 14:52:20

這是因爲你max-width: 100%風格，你申請img標籤。在你的情況下，它只有23px，這是因爲它的父.node .field-name-field-op-main-image有float: left，這意味着它將作爲一個內聯元素（但不會考慮你的圖像的寬度，或可能你稍後設置你的圖像寬度）。換句話說刪除任何一個float:left或max-width:100%，你會得到「期望」的結果

來源

2012-02-28 18:21:17

，我遲到了這個派對，但我只是碰到了這個問題我自己，而簡單地刪除max-width或不浮父元素沒有選擇。其結果是，我必須找到一個真正解決方案：只需添加width:auto;，例如：

img { 
    height: auto; 
    width: auto; 
    max-width: 100%; 
}

這諷刺的是在每一個瀏覽器但的Chrome 20，然後開始表現爲IE8用來表現的很出色。於是我使出了CSS的黑客目標IE8只：

img { 
    height: auto; 
    width: auto\0/; 
    max-width: 100%; 
}

現在大家怪胎面前，我選擇了一個CSS破解，因爲我做的引導CSS框架的復位，它已經在使用黑客這個特殊的變化其他地方。如果你想要去的白帽子的路線，那麼你可以簡單的添加條件註釋你的HTML：

<!--[if !IE 8]> 
    <style type="text/css"> 
     img { width: auto; } 
    </style> 
<![endif]-->

還要說明一點，如果你使用上面的黑客在* .LESS文件，要逃避它或LESS編譯器會嗆它：

width: e('auto\0/');

來源

2012-07-03 15:58:56

我認爲有條件的評論必須沒有！... <！ - [if IE 8]> – Volker 2013-10-16 12:01:11

在我的情況下出於某種原因IE8不想服從明確width: 46px; CSS。

修復：添加min-width: 46px;會強制IE8在不破壞其他瀏覽器的情況下呈現正確的寬度。

來源

2012-11-08 04:20:22

在IE8中被壓縮的圖像

回答

相關問題