CSS 未在 IE 中显示（任何版本）答案

【问题标题】：CSS not showing in IE (any version)CSS 未在 IE 中显示（任何版本）
【发布时间】：2012-06-16 02:42:31
【问题描述】：

在我的网站上线之前，我正在对其进行一些最终测试。我已经在 Chrome 中构建了它，并且我发现了在 IE 中完成的所有工作！

我构建的精灵没有在 IE 中显示...

HTML

<a href="https://plus.google.com/111035429397283398622/" target="_blank"><img src="http://127.0.0.1:600/wordpress/wp-content/uploads/2012/06/spacer.gif" class="sprite social plus1" alt="Join our Circles on Google+" /></a>

<a href="http://www.facebook.com/primorisfinancial" target="_blank"><img src="http://127.0.0.1:600/wordpress/wp-content/uploads/2012/06/spacer.gif" class="sprite social facebook" alt="Like Primoris Financial on Facebook" /></a>

<a href="http://au.linkedin.com/in/benjaminirons" target="_blank"><img src="http://127.0.0.1:600/wordpress/wp-content/uploads/2012/06/spacer.gif" class="sprite social linkedin" alt="Benjamin Irons on LinkedIn" /></a>

<a href="http://primorisfinancial.blogspot.com" target="_blank"><img src="http://127.0.0.1:600/wordpress/wp-content/uploads/2012/06/spacer.gif" class="sprite social blogger" alt="Primoris Financial on Blogger" /></a>

<a href="http://twitter.com/PrimorisFinPlan" target="_blank"><img src="http://127.0.0.1:600/wordpress/wp-content/uploads/2012/06/spacer.gif" class="sprite social twitter" alt="Follow Primoris Financial on Twitter" /></a>

<a href="http://www.youtube.com/PrimorisFinancial" target="_blank"><img src="http://127.0.0.1:600/wordpress/wp-content/uploads/2012/06/spacer.gif" class="sprite social youtube" alt="Primoris Financial on YouTube" /></a>

使用以下 CSS

.sprite {background:url(http://127.0.0.1:600/wordpress/wp-content/uploads/2012/06/Social-CSS-Sprite-Test.png);}
    .social {height:32px;}

/* Social Buttons */

        .plus1 {width:32px; background-position:0px 0px;}
        .facebook {width:32px; background-position:-33px 0px;}
        .linkedin {width:32px; background-position:-66px 0px;}
        .blogger {width:32px; background-position:-99px 0px;}
        .twitter {width:32px; background-position:-132px 0px;}
        .youtube {width:32px; background-position:-165px 0px

;}

【问题讨论】：

你不能使用指向 localhost 的 URL。
他还没活着，所以这不是手头的问题
你知道IE是什么版本的吗？
是的，当网站上传并上线时，URL 会发生变化，在上传之前进行测试以使所有内容都显示出来。精灵在 Chrome 中生成，但在 IE 中不生成
将该图像放入远程服务器并在 sprite 类上使用该链接。

标签： css google-chrome cross-browser internet-explorer-9

【解决方案1】：

据我所知，其中一个主要问题是您链接到 CSS 中的图像时没有使用引号/语音标记。并且正如dystroy所说，不要硬链接到图片，最好相对像这样：

{background:url('../wp-content/uploads/2012/06/Social-CSS-Sprite-Test.png');}

这应该可以解决您的问题。

【讨论】：

【解决方案2】：

从图像中删除 src（使用 span 比使用 img 更好）。

将 CSS 中的 URL 修复为相对的，而不是指向 127.0.0.1 (localhost)。

检查您的 HTML 标头是否正确：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

【讨论】：

别忘了让所有的html都有效！