Internet Explorer 7中的CSS背景大小封面[重复]
Posted
技术标签:
【中文标题】Internet Explorer 7中的CSS背景大小封面[重复]【英文标题】：css background-size cover in internet explorer 7 [duplicate] 【发布时间】：2011-08-19 05:30:20 【问题描述】：我知道IE7不支持background-size cover。
我在网上搜索了一些解决方案，但我唯一得到的是我应该将img 与width: 100% 和height:100% 放在一起作为背景。
这是唯一的解决方案吗？我已经看到-ms-filter 的一些解决方案，但它没有用。有人有其他解决方案吗？
1 特别之处：
我有超过 1 个 div 有这个 background-size 封面属性。
在 Firefox 中一切正常（多么令人惊讶）。
Edit1：我的代码如下所示：
<div class="section" id="section1">here should be the first picture as the background!!</div>
<div class="section" id="section2">here should be the second picture as the background!!</div>
<div class="section" id="section3">here should be the third picture as the background!!</div>
【问题讨论】：
阅读本文css-tricks.com/perfect-full-page-background-image @sandeep，你的意思是第一个 ie-fix 吗？ @Sai：嗯，我的意思是位置......无论如何它应该在ie中工作。每个人都知道我的意思.. @eav，用于 ff、chrome 等和 IE 的封面属性，您可以使用与封面属性相同效果的过滤器。 @sandeep，我的 css 中并没有这个代码： filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/kiesel.jpg', sizingMethod='scale') ; !important -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/kiesel.jpg', sizingMethod='scale')"; !重要 【参考方案1】：给你的图片一个类拉伸（或其他），并在你的 css 中放这个：
img.stretched
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
请务必将您的 img 标签放在 <body> 标签的正下方。
【讨论】：
我在 html 中没有图像。这是 css 属性... @eav ：如果您真的不想在文档中插入 img 标签，至少可以通过 javascript 动态执行。否则，您将只剩下部分浏览器支持。例如，您可以使用 jQuery：$("#section1").append("<img class='stretched' src='' alt='' />");
是的，没错...多么可悲的是，仍然有一些 Internet Explorer 7 用户...无论如何，我也可以将 img thag 放入第 1 节。那不是我的问题。 :-)
需要添加z-index:-10;在样式中【参考方案2】：
这适用于我的 IE7
http://kimili.com/journal/the-flexible-scalable-background-image-redux
您可能需要从这里安装 IE9.js 库（适用于许多版本的 IE）
http://code.google.com/p/ie7-js/
【讨论】：
是的，这可能会奏效.. 这是什么 ie7-js？【参考方案3】：两个想法： 1.我目前正在尝试查看此过滤器是否有帮助：
AlphaImageLoader
-
如果背景大小在 IE 中是不可能的，也许你必须让你的背景图片包含两个图像。第一个图像必须以某种方式放置，因此它会自动在 IE 中正确显示，而无需定义背景大小。对于所有其他浏览器，您可以使用 background-size 和 position 将第二张图像推到正确的位置。现在试试这个...
【讨论】：
过滤器在 body 标签上设置或使用自定义字体时会产生不可预知的效果。您的里程可能会有所不同。【参考方案4】：使用Modernizr，您可以发现用户浏览器的功能。
通过在标题中链接来安装 Modernizr
<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
在你的 HTML 标签中，
<html class="no-js">
使用 CSS，您可以根据浏览器的支持设置页面样式 - Check the documentation 了解支持的检测。在这种情况下，我们需要 background-size 类
在您的 CSS 文件中 - 对于没有背景大小的浏览器（也就是 IE）
.no-background-size #image
background-image: url(lol.png);
min-height: 100%;
min-width: 100%;
这适用于浏览器：
.background-size #image
background-image: url(lol.png);
background-size: cover;
使用这种方法更符合标准，因为将来min-height: 100% 等标签可能会被使用。
【讨论】：
【参考方案5】：我为此编写了一个插件：
https://github.com/aramkocharyan/CSS-Background-Size-jQuery-Plugin
<div style="width: 400px; height: 300px;">
<img class="background-size-cover" src="apple.jpg" />
</div>
<script>
$(document).ready(function()
$('.background-size-cover').bgdSize('cover');
);
</script>
【讨论】：
【参考方案6】：查看此帖子以获得答案：
How do I make background-size work in IE?
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/someimage.png',sizingMethod='scale')";
在 IE8 中完美运行
【讨论】：
以上是关于Internet Explorer 7中的CSS背景大小封面[重复]的主要内容，如果未能解决你的问题，请参考以下文章
:after 和 :before 用于 Internet Explorer 7 的 CSS 伪元素
Wordpress CSS 在 Internet Explorer 中不起作用
:after 和 :before 用于 Internet Explorer 7 的 CSS 伪元素破解