在Firefox/IE中保留完整大小的圖像，但在基於webkit的瀏覽器中完美工作

我無法爲我的生活解決與我的網站上的圖像有關的問題。在Firefox/IE中保留完整大小的圖像，但在基於webkit的瀏覽器中完美工作

我試過在img元素上使用-moz-box-sizing: border-box;無濟於事，我無法用頭來解決問題。

圖像似乎在Mozilla Firefox和Internet Explorer 10中保留了完整的500x250尺寸，但在Google Chrome和Apple Safari上正常工作和格式化。

我已經將HTML和CSS輸入到JSFiddle中，並且圖像仍然存在，可以找到JSFiddle here幷包含有關節的所有必需代碼。

響應功能被刪除，以減少代碼的大小，因此它不會摺疊成一個列。

在我精神崩潰之前需要一些幫助，謝謝。

來源

2013-06-12 Ross Smith

我並不十分清楚實際問題在這裏。我甚至都沒有在你的小提琴的任何地方看到「邊框」。 –

我刪除了邊框格式，因爲我無法使其工作。我讀了一篇關於使用webkit和Mozilla之間的差異的文章，它出現了多次，所以我決定嘗試一下，但不幸的是沒有補救的情況。圖片可以在這裏找到：http://i.imgur.com/o20gezr.png Chrome圖像正在調整自身的大小，而Firefox圖像保留它不應該的全尺寸，它應該縮小爲在Chrome示例中。度量標準顯示在這裏的圖片的真實大小： http://imgur.com/a/BaRvm 希望清除一點東西！ –

你試圖完成什麼 – Huangism

你的div沒有寬度（.alignLeft和.alignRight）

嘗試是這樣的http://jsfiddle.net/W5Edb/1/

.alignLeft { 
     width: 100%; 
    } 
    .alignRight { 
     width: 100%; 
    }

你必須調整你的保證金或減少％了div，但你的的想法，應該能夠按照你需要的方式進行佈局

來源

2013-06-12 18:51:12 Huangism

它們都包含在具有「half」類的div中，其寬度在這裏是有限的： .half { \t width：49.8％; \t} 這應該不夠嗎？ –

我認爲你的問題在這裏回答了這個問題，在不同瀏覽器中的不一致性 – Huangism

我已經爲'.alignLeft'和'.alignRight'分配了一個特定的寬度，這似乎已經清除了它。不知道爲什麼Firefox不喜歡它沒有指定的寬度！非常感謝，我會一直在那一整天！ –

在Firefox/IE中保留完整大小的圖像，但在基於webkit的瀏覽器中完美工作

回答

相關問題