CSS：在IE和Firefox或Chrome中對齊圖像 - 圖像大小都搞砸了

對我來說令人沮喪的問題。CSS：在IE和Firefox或Chrome中對齊圖像 - 圖像大小都搞砸了

這是鏈接。在IE，Chrome和Firefox中試用。後兩者都很好，圖片右對齊，顯示爲375x500。但在IE瀏覽器中，圖片與右側對齊，但顯示爲15x500。

http://www.themoneygoround.com/2011/04/intc-intel-shows-up-strong-afterhours.html

當我看到在查看源代碼在IE中，圖像的寬度和高度應該是375x500，但是這不是顯示的內容。圖像按預期向右對齊，但縮小至15x500。感謝您的任何想法...

這裏是CSS

p img { 
    padding: 0; 
    max-width: 100%; 
    } 

img.centered { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    } 

img.alignright { 
    padding: 4px; 
    margin: 0 0 2px 7px; 
    display: inline; 
    } 

img.alignleft { 
    padding: 4px; 
    margin: 0 7px 2px 0; 
    display: inline; 
    } 

.alignright { 
    float: right; 
    } 

.alignleft { 
    float: left; 
    } 
/* End Images */

來源

2011-04-22 muck

讓IE像其他更現代的瀏覽器一樣執行的問題有望成爲問題併成爲常態。 – Rob 2011-04-22 18:47:15

我很困惑。在IE9中圖像看起來是一樣的，但右側的閃光燈是不同的。 – Rob 2011-04-22 18:52:53

我在IE 8中看到了問題。問題在於您的max-width屬性爲<img>。 IE不會正確顯示max-width與XHTML文檔類型（您似乎正在使用）。您可以刪除max-width或使用在IE中觸發標準模式的文檔類型。我推薦按照this article的HTML5文檔類型。

來源

2011-04-22 18:56:50 DaveGauer

謝謝，D Gauer。刪除最大寬度解決了問題。我也更改爲HTML5文檔類型，但它沒有解決它，但可能是一個好主意。再次感謝你。 – muck 2011-04-22 19:28:15

@muck很高興工作！如果你有機會「接受」我的答案，我會很感激。快樂發展。 – DaveGauer 2011-04-22 20:11:33

首先，我看到約14 JavaScript的IE瀏覽器中的錯誤，當我拉，最多說明「空」爲空或不是一個對象。也許從那裏開始？

編輯：順便說一句，我是在IE8

工作液：

我刪除了包裝有問題的圖像<p class="alignright"></p>，和它的工作就像一個魅力。

查看我的working jsFiddle demo。

來源

2011-04-22 18:54:18

我相信這隻適用，因爲最大寬度現在不再指代，因爲CSS是指「p img」。 – DaveGauer 2011-04-22 19:12:20

@D Gauer - 可能，但它確實有效，並且允許OP繼續前進而沒有任何其他混亂。我不知道爲什麼最大寬度是真的開始，但不是我的應用程序。 = D – 2011-04-22 19:16:47

CSS：在IE和Firefox或Chrome中對齊圖像 - 圖像大小都搞砸了

回答

相關問題