在Safari中消失的圖像5

如果我刪除

.box-media-link-container { 
float:left; 
}

它按預期工作。這有什麼好的解釋嗎？有沒有其他的選擇float：left？（除了表）

工作實施例（非液浮容器）：http://jsfiddle.net/Kju6z/5/

（編輯2：即使不是這種聖盃，在更先進的實施例中 - 這仍然失敗，即使沒有浮動）。

如果你能5.1（通過http://browserstack.com或類似）運行的Safari瀏覽器 - 請檢查了這一點。我不確定這是什麼原因。

http://jsfiddle.net/Kju6z/

.box-media-box .box-media-link { 
max-width:75px; 
width:auto; 
height:auto; 
} 

.box-media img { 
max-width:100%; 
height:auto; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
overflow:hidden; 
}

的浮動圖像寬度是事先不知道，但圖像容器具有最大寬度設定960x75像素（注意，在這種情況下，我不知道該圖像是實際上100px的 - 但這只是例子）。

圖像本身的最大寬度爲100％，高度爲自動，因此它具有響應性。

這似乎適用於除Safari瀏覽器以外的所有瀏覽器，這個甚至不顯示圖像。它有時會這樣做，這讓我覺得這個問題可能是由於圖像還沒有被加載，而CSS被解釋，這可能是什麼原因？

查看附件截圖，瞭解它在Safari 5.1中的外觀（小黑色邊框圈應該包含圖像）。它看起來好像圖像尚未加載（因爲沒有設置寬度或高度），但圖像從不加載。只有當你去檢查元素時，它纔會立即彈出，或者在你更改任何一個屬性之後。

enter image description here

來源

2013-09-25 Wesley

如果圖像尺寸是未知的，因爲它是動態生成的內容的一部分，是不是你能夠提供尺寸動態呢？ – cimmanon

@cimmanon - 不，這些是來自facebook api的結果 - 他們確實有一些圖片，他們允許您控制大小，但不是我需要的大小。 – Wesley

僅僅因爲FB API沒有明確提供圖片尺寸，並不意味着您*無法*獲取它們（請參閱：http://stackoverflow.com/a/626505/1652962）。 – cimmanon

max-width: intrinsic; 
max-width: -moz-max-content; 
max-width: 100%;

這幫助。

檢查這裏： https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

來源

2013-10-15 18:42:50

您可以添加一些隨機高度屬性的圖像（因爲在CSS你正在它再次自動）。

這裏是一個演示，其中我只將高度=「2」添加到圖像中，並且在safari下可以。

<img class="box-picture" src="http://placehold.it/100x100/cccccc/ffffff&amp;text=thumb" height="2" />

jsFiddle

來源

2013-09-25 19:45:18 drip

謝謝，但不幸的是這不起作用。它只在第二次加載頁面時起作用 - 因此在加載圖像之後。如果您完全關閉並重新打開瀏覽器，則會在第一頁加載時看到圖像尺寸不合適。 – Wesley

是的，你說得對。那麼如何刪除箱子大小的屬性，並使最大寬度在97-98％左右;因爲看起來，那是什麼讓safari失敗？ – drip

實際上它是浮動：左側使其失敗（或框的大小） - 但我真的需要框的大小來使東西工作，看到我更新的消息。 – Wesley

好了，我用了waitForImages插件的定製版本，檢查每個圖像，看看它的加載。在加載之前，它是隱藏的並且沒有浮點數：left - 加載之後float：left被添加並顯示。這似乎解決了這個問題。

waitForImages插件的自定義也是爲緩存的圖片啓動eachCallback，以便它們也可以顯示圖片。

https://github.com/alexanderdickson/waitForImages

來源

2013-09-26 15:33:40 Wesley

在Safari中消失的圖像5

回答

相關問題