CSS 未在 IE 中显示(任何版本)

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

我正在网站上线前对其进行一些最终测试。我在 Chrome 中构建了它,并且发现所有在 IE 中都可以正常工作的东西!

我有一个我构建的 sprite 没有在 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

;

最佳答案

据我所知,其中一个主要问题是您在 CSS 中链接到图像时没有使用引号/语音标记。正如 dystroy 所说,不要硬链接(hard link)到图像,最好是这样相对地做:

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

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

关于CSS 未在 IE 中显示(任何版本),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11009832/

相关文章:

html - 与在本地查看相比,托管时我的网页看起来完全不同

CSS:为什么从父 block 中删除后代元素?

javascript - 加载 AJAX 调用的 div 在 IE 或 Chrome 中不显示,在 Firefox 中工作正常

javascript - 如何为 Gmail 制作稳定的书签

android - 圆形框上的边框未在 Android/Chrome 上显示

html - Bootstrap 导航栏问题

css - 网站在实际移动设备上看起来与在桌面上使用欺骗性用户代理看起来不同

javascript - 浏览器兼容性问题列表?

css - 跨浏览器 CSS 是否需要 "CSS Reset"?

javascript - 在各种平台(例如智能手机、平板电脑)上保持 div 的大小