标签背景图片未显示在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规则调整其大小，这样可以节省流量并缩短页面加载时间。

有一种解决方法（ 如何在背景中工作 ），但我仍然认为仅调整图像大小会更好。

Answer 2

这是因为background-size是CSS3属性，IE9之前不支持... CSS background-size在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将其宽度和高度更改为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问题：

• 规范化
• 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]-->