css圖像在safari中沒有顯示？

以下代碼在safari中無法正常工作，但在IE中正常工作。css圖像在safari中沒有顯示？

<style> 
.my 
{ 
background:url("../../myproject/images/add.gif"); 
width:100%; 
height:22px; 
background-repeat: no-repeat; 
} 
</style> 
<span class="my"> 

</span>

來源

2010-06-28 Karandeep Singh

使用backgound-image: url("../../myproject/images/add.gif");或者使用快捷background開始顏色：background:transparent url(...) no-repeat;

並添加display:block;將允許您設置span元素的高度和寬度，但它將不再與其他文本行。

來源

2010-06-28 05:42:08 Nilloc

僅使用背景圖像將清除它可能繼承的任何背景色...我始終只使用背景圖像。 – animuson 2010-06-28 05:43:56

@animunson你的權利，但如果你有一個傳統的png或gif，爲背景快捷方式定義透明顏色會更安全一些。如果瀏覽器不支持（Safari將背景色設置爲「初始」，而FF將其設置爲「透明」，如果未定義）。 – Nilloc 2010-06-28 05:53:00

@animunson，我回過頭來看看* curses webkit inspector *計算的值在未定義時實際上是透明的。 – Nilloc 2010-06-28 05:58:57

如果IE瀏覽器能夠正常工作，並且Safari（和Firefox）不支持，那可能意味着IE不符合標準。首先，不能有寬度和高度。一些較早的IE版本實際上讓你有寬度和高度。

所以你可以改變你的跨度到div看。

此外，始終使用現代的文檔類型，如HTML 4.01或XHTML 1.0，以便IE將嘗試使用更標準的呈現方法。

來源

2010-06-28 05:41:51

LOL - 偉大的答案！ – 2010-06-28 05:43:20

默認情況下，span元素爲display: inline，因此height和width屬性不適用於它。

由於它沒有明確的尺寸，也沒有內容，它被0渲染爲0。這不會留下任何空間讓它有可見的背景。

使用不同的元素（默認爲block），或者將display屬性更改爲高度和寬度適用的顯示屬性以使其起作用。這就是說，如果你只是創建一個沒有內容的盒子，那麼你應該首先使用img這個元素。

來源

2010-06-28 05:41:58 Quentin

有些人把圖片作爲背景元素，所以他們沒有選擇與他們周圍的文字。這有點矯枉過正，但無論如何。 – animuson 2010-06-28 05:50:36

您應該使用background-image: url(...);看到here

來源

2010-06-28 05:44:44

您是否閱讀過這樣的問題：「只要其中一個屬性值是按照這個順序丟失的，就沒關係。」輸入'背景'比鍵入'background-image'更短，它使得絕對沒有區別。 – animuson 2010-06-28 05:46:03

是的，這是W3Schools再次廢話。這是一個可怕的資源，這只是一個錯誤。（在這種情況下使用背景圖像將無濟於事，但使用簡寫形式（重置未指定屬性）和單獨屬性之間存在**差異。 – Quentin 2010-06-28 05:51:23

@David Dorward：我不會認爲這是一個錯誤，只是缺少可能應該添加的信息。 – animuson 2010-06-28 05:53:19

css圖像在safari中沒有顯示？

回答

相關問題