eav*_*eav 16 css internet-explorer internet-explorer-7
我知道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>
Run Code Online (Sandbox Code Playgroud)
Sac*_*ull 11
使用Modernizr,您可以发现用户的浏览器的功能.
通过在标题中链接来安装Modernizr
<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
Run Code Online (Sandbox Code Playgroud)
在HTML标记中,
<html class="no-js">
Run Code Online (Sandbox Code Playgroud)
使用CSS,您可以在浏览器支持页面时设置样式 - 请检查文档以了解支持的检测.在这种情况下,我们想要这个background-size课程
在你的CSS文件中 - 对于没有背景大小的浏览器(AKA只是IE)
.no-background-size #image{
background-image: url(lol.png);
min-height: 100%;
min-width: 100%;
}
Run Code Online (Sandbox Code Playgroud)
这适用于以下浏览器:
.background-size #image{
background-image: url(lol.png);
background-size: cover;
}
Run Code Online (Sandbox Code Playgroud)
使用此方法更符合标准,因为将来的标签min-height: 100%可能会变得未使用.
查看这篇文章的答案:
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/someimage.png',sizingMethod='scale')";
Run Code Online (Sandbox Code Playgroud)
在IE8中完美运行
给你的图像一个 streched 类(或其他任何东西),并在你的 css 中添加以下内容:
img.stretched {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
Run Code Online (Sandbox Code Playgroud)
请务必将您的 img 标签放在该<body>标签的正下方。