的Internet Explorer無法顯示圖像通過CSS

加載這是我的HTML（CSS的是HTML的一部分）：的Internet Explorer無法顯示圖像通過CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <body> 
     <div id='header'> 

      <table id='headerBar'> 
       <tr> 
        <td><a href ='#' id='homeIcon'></a></td> 
        <td><a href ='#' id='myProfileIcon'></a></td> 
        <td><a href ='#' id='settingsIcon'></a></td> 
       </tr> 
      </table> 
     </div> 
    </body> 
</html> 

<style> 
    #homeIcon { 
     content:url('shipping3.png'); 
    } 
    #settingsIcon { 
     content:url('shipping3.png'); 
    } 
    #myProfileIcon { 
     content:url('shipping3.png'); 
    } 
</style>

當我在谷歌瀏覽器打開此文件時，它工作完全正常，並顯示3圖片。當我在Internet Explorer中打開它時，3個圖像都不顯示（這只是一個空白頁）。任何想法爲什麼？（我試着從Internet Explorer 10,9,8和7查看它。沒有顯示任何3張圖像）。

來源

2014-07-06 user2719875

嘗試改變的doctype只是''，IE7和更早版本不支持生成的內容<！DOCTYPE HTML！>：http://reference.sitepoint.com/css/content – jammykam

嘗試使用'＃anchor-id {display：block;背景：網址（ 'image.png'）; }' –

'content'應該用於''before''或'after'後面的僞元素，而不是元素本身。 https://developer.mozilla.org/en-US/docs/Web/CSS/content –

因爲內容屬性與:: before和:: after僞元素一起使用來生成文檔中的內容。

http://www.w3.org/wiki/CSS/Properties/content

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
     <style> 
    #homeIcon::after { 
     content:url('http://www.placehold.it/200x200'); 
    } 
    #settingsIcon::after { 
     content:url('http://www.placehold.it/200x200'); 
    } 
    #myProfileIcon::after { 
     content:url('http://www.placehold.it/200x200'); 
    } 
</style> 
</head> 
<body> 
    <div id='header'> 

     <table id='headerBar'> 
      <tr> 
       <td><a href ='#' id='homeIcon'></a></td> 
       <td><a href ='#' id='myProfileIcon'></a></td> 
       <td><a href ='#' id='settingsIcon'></a></td> 
      </tr> 
     </table> 
    </div> 
</body> 
</html>

http://jsfiddle.net/w7c27/3/

來源

2014-07-06 21:39:58 midstack

你沒有忘記第一句話中的一些單詞嗎？ –

我編輯了答案@ A.L – midstack

我已經刪除了大部分代碼並留下了一個例子。

<td width="100" height="100" id='homeIcon'><a href ='#'></a></td> 
<td><a href ='#' id='myProfileIcon'></a></td> 
<td><a href ='#' id='settingsIcon'></a></td> 

<style> 
    #homeIcon { 
     background:url("shipping3.png"); 
    } 
... 
</style>

標籤我自己沒有大小，尤其是空的時候。這是一個沒有任何寬度/高度的容器。

爲了向後兼容的原因的正確語法的圖像鏈接作爲背景是背景：URL（「shipping3.png」）

我們爲了觀察更容易，其中加入的寬度和高度在線路我們指定它們。

來源

2014-07-06 21:24:45

在Google Chrome和IE中執行此項工作嗎？無論我是否指定高度/寬度，背景似乎都不適用於兩種瀏覽器中的任何一種。當我使用背景時，什麼也沒有顯示出來。當我使用內容時，它顯示在Chrome中，但不是IE。 – user2719875

yes的確如此：http://www.w3schools.com/cssref/css3_pr_background.asp –

你可以簡單地使用background：url（）添加圖像。由於標籤是空的，所以在IE中它不顯示圖像。這裏你去

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    #homeIcon { 
     background:url('shipping3.png'); 
     height:300px; 
     width:100px; 

    } 
    #settingsIcon { 
     background:url('shipping3.png'); 
    } 
    #myProfileIcon { 
     background:url('shipping3.png'); 
    } 
</style> 
</head> 
    <body> 
     <div id="header"> 
      <table id='headerBar'> 
       <tr> 
        <td><a href ="#" id="homeIcon">Lorem Ipsum</a></td> 
        <td><a href ="#" id="myProfileIcon"></a></td> 
        <td><a href ="#" id="settingsIcon"></a></td> 
       </tr> 
      </table> 
     </div> 
    </body> 
</html>

來源

2014-07-06 21:31:07

hm，做背景：url（'shipping3.png'）;並給它一個寬度和高度不適用於我的Chrome或IE。什麼都沒有顯示出來..它在你的Chrome上適合你？即使標籤內沒有文字？ – user2719875

的Internet Explorer無法顯示圖像通過CSS

回答

相關問題