标签背景图像未显示在ie7上

Question

我有一些分配给类的标记：class='user-home'我正在使用此css来实现背景图像：

.user-options .user-home{
    background-image:url('../../img/user-home.png');
    background-position:center;
    background-size: 14px 14px;
    background-repeat:no-repeat;
    border: none;
}

问题 - 这就是我对chrome / mozila / ie11的看法

这就是我所得到的ie7

解决方案是什么？感谢。

Answer 1

ie7不支持规则background-size。建议使用小图像（14X14），不要使用CSS规则调整大小，这样可以节省流量并缩短页面加载时间。

有一种解决方法（how-do-i-make-background-size-work-in-ie），但我仍然认为最好只调整图片大小。

Answer 2

那是因为background-size是一个CSS3属性，在IE9之前不支持... CSS background-size not working in IE7/8

我认为只有解决方案是将图片编辑为14px 14px

Answer 3

像IE7这样的浏览器不支持CSS3属性。所以你不能使用它们，否则就会得到这些类型的结果。

您需要将背景图片CSS更改为：

.user-options .user-home{
    background-image:url('../../img/user-home.png');
    background-position:center;
    background-repeat:no-repeat;
    border: none;
}

现在，编辑图像分辨率并将其宽度和高度更改为14x14。

或者如果您想使用当前的CSS，请从Google访问此网站：

https://code.google.com/p/ie7-js/

从那里开始，包括使IE成为标准浏览器所需的JS，这就是代码：

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js">
</script>
<![endif]-->

这个JS将启用几乎所有的CSS和HTML属性。这应该包含在head元素中。

Answer 4

你确定它的IE7不是兼容性视图（IE6）无论如何背景大小都不适用于IE7

问题的一种方式，早些时候我曾使用DD_belatedPNG Javascript修复IE6中的PNG问题

您可以使用以下工具之一修复所有IE问题：

• Normalize
• ie7-js
• respond.min.js

对于其他HTML5修补程序和媒体查询，我使用excanvas.js和respond.js

代码如下：

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->