IE10 img標籤中這個奇怪的圖標是什麼？

我有這個奇怪的問題在IE10，那裏有我的網站的社交網絡圖標都在他們頂部一個奇怪的圖形：IE10 img標籤中這個奇怪的圖標是什麼？

我似乎無法擺脫他們。我嘗試將邊框，填充，邊距，輪廓設置爲零，但沒有任何效果。下面是HTML：

<div id="socialIcons"> 
    <a href="#"><img id="fbIcon" width="24" height="24" href="one.png" /></a> 
    <a href="#"><img id="gpIcon" width="24" height="24" href="one.png" /></a> 
    <a href="#"><img id="twIcon" width="24" height="24" href="one.png" /></a> 
    <a href="#"><img id="piIcon" width="24" height="24" href="one.png" /></a> 
</div>

和CSS：

#socialIcons > a > img { 
float:left; 
width: 24px; 
height: 24px; 
background-image: url(../img/icons.png); 
} 
#gpIcon { 
background-position: -24px 0; 
} 
#twIcon { 
background-position: -48px 0; 
} 
#piIcon { 
background-position: -72px 0; 
}

one.png是1x1透明PNG。我使用精靈來繪製實際的圖標。我懷疑這個問題與錨標記有關，因爲其他圖像沒有這個問題。

來源

2013-07-15 Ermir

看起來像一個丟失的圖像圖標。可能是因爲你的圖片標籤不對。 –

在這種情況下，IE瀏覽器支持IE，而其他瀏覽器則顯示錯誤，這些瀏覽器默默無聞。 – Ermir

你爲什麼在這裏使用'img'標籤？它沒有任何意義。爲什麼不把所有樣式直接放在'a'標籤上？ – RoToRa

<img id="fbIcon" width="24" height="24" href="one.png" />

應該

<img id="fbIcon" width="24" height="24" src="one.png" />

img標籤沒有href屬性。參考W3C HTML/Elements/img

來源

2013-07-15 08:26:59 bansi

是的，那真是愚蠢的我。你的建議修正了它，謝謝。 – Ermir

實際上，他通過CSS設置圖像，所以它甚至不需要'src'屬性。 – webnoob

@webnoob：在這種情況下，他不應該首先使用img標籤。 – ThiefMaster

您正在通過CSS指定圖像。除非您真的需要兩張圖片，否則不應該使用<img>標籤 - 只需使用CSS將<a>顯示爲display: inline-block並在其中添加背景圖片即可。

來源

2013-07-15 08:33:03 ThiefMaster

我使用了一個帶有js的div，它解決了IE和Chrome中的問題。 Chrome沒有圖標，但顯示了所有標題文字。 –

您正在使用具有錯誤屬性的<img>標籤（href）。由於您使用CSS來添加圖像，你應該遵循使用<span>

<div id="socialIcons"> 
<a href="#"><span id="fbIcon" width="24" height="24" ></span></a> 
<a href="#"><span id="gpIcon" width="24" height="24" ></span></a> 
<a href="#"><span id="twIcon" width="24" height="24" ></span></a> 
<a href="#"><span id="piIcon" width="24" height="24" ></span></a> 
</div>

CSS

#socialIcons > a > span { 
    float: left; 
    width: 24px; 
    height: 24px; 
    background-image: url(../img/icons.png); 
} 
#gpIcon { 
    background-position: -24px 0; 
} 
#twIcon { 
    background-position: -48px 0; 
} 
#piIcon { 
    background-position: -72px 0; 
}

見工作fiddle的（在IE10測試）的一般做法

來源

2013-07-15 08:38:49

IE10 img標籤中這個奇怪的圖標是什麼？

回答

相關問題