作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当我替换@media 中的背景图片时,IE9+ 中不再显示背景图片。它在 FF、Safari 和 Chrome 中完美运行。我尝试了几次绕过,但它似乎被这些线路所取代(见下文)。有什么建议吗?
代码
<div class="feature">
<ul class="feature-list">
<li class="nav-boat"><a href="/pages/disclaimer.php" ></a></li>
<li class="nav-camper"><a href="#"></a></li>
<li class="nav-tools"><a href="#"></a></li>
<li class="nav-cleaner"><a href="#"></a></li>
<li class="nav-motorcycle"><a href="#"></a></li>
<li class="nav-car"><a href="#"></a></li>
<li class="nav-warehouse"><a href="#"></a></li>
<li class="nav-office"><a href="#"></a></li>
</ul>
<div class="clear"></div>
</div>
CSS 下方
.feature {
width:920px;
margin:30px auto;
height:500px;
}
.feature-list {
list-style: none;
}
.feature-list li {
width:185px;
height:185px;
margin-top:40px;
border:2px solid #4d4d4d;
margin-left:33px;
}
.feature-list li a {
text-decoration: none;
float: left;
}
.nav-camper {
background: url(/images/camper-icon-sm.gif) center center no-repeat;
}
.nav-camper:hover {
background-image: url(/images/camper-icon-hover-sm.gif);
}
.nav-boat {
background: url(../images/boat-icon-sm.gif) center center no-repeat;
}
.nav-boat:hover {
background-image: url(../images/boat-icon-hover-sm.gif);
}
.nav-tools {
background: url(../images/tools-icon-sm.gif) center center no-repeat;
}
.nav-tools:hover {
background-image: url(../images/tools-icon-hover-sm.gif);
}
.nav-cleaner {
background: url(../images/cleaner-icon-sm.gif) center center no-repeat;
}
.nav-cleaner:hover {
background-image: url(../images/cleaner-icon-hover-sm.gif);
}
.nav-motorcycle {
background: url(../images/motorcycle-icon-sm.gif) center center no-repeat;
}
.nav-motorcycle:hover {
background-image: url(../images/motorcycle-icon-hover-sm.gif);
}
.nav-car {
background: url(../images/car-icon-sm.gif) center center no-repeat;
}
.nav-car:hover {
background-image: url(../images/car-icon-hover-sm.gif);
}
.nav-warehouse {
background: url(../images/warehouse-icon-sm.gif) center center no-repeat;
}
.nav-warehouse:hover {
background-image: url(../images/warehouse-icon-hover-sm.gif);
}
.nav-office {
background: url(../images/office-icon-sm.gif) center center no-repeat;
}
.nav-office:hover {
background-image: url(../images/office-icon-hover-sm.gif);
}
@媒体查询。
@media screen and (max-width: 769px) {
.feature-list li {
width:120px;
height:120px;
}
.feature ul li a {
width: 120px;
height: 120px;
}
.divider {
display:none;
}
.nav-camper {
background: url(../images/camper-icon-xs.gif) center center no-repeat;
}
.nav-camper:hover {
background-image: url(../images/camper-icon-hover-xs.gif);
}
.nav-boat {
background: url(../images/boat-icon-xs.gif) center center no-repeat;
}
.nav-boat:hover {
background-image: url(../images/boat-icon-hover-xs.gif);
}
.nav-tools {
background: url(../images/tools-icon-xs.gif) center center no-repeat;
}
.nav-tools:hover {
background-image: url(../images/tools-icon-hover-xs.gif);
}
.nav-cleaner {
background: url(../images/cleaner-icon-xs.gif) center center no-repeat;
}
.nav-cleaner:hover {
background-image: url(../images/cleaner-icon-hover-xs.gif);
}
.nav-motorcycle {
background: url(../images/motorcycle-icon-xs.gif) center center no-repeat;
}
.nav-motorcycle:hover {
background-image: url(../images/motorcycle-icon-hover-xs.gif);
}
.nav-car {
background: url(../images/car-icon-xs.gif) center center no-repeat;
}
.nav-car:hover {
background-image: url(../images/car-icon-hover-xs.gif);
}
.nav-warehouse {
background: url(../images/warehouse-icon-xs.gif) center center no-repeat;
}
.nav-warehouse:hover {
background-image: url(../images/warehouse-icon-hover-xs.gif);
}
.nav-office {
background: url(../images/office-icon-xs.gif) center center no-repeat;
}
.nav-office:hover {
background-image: url(../images/office-icon-hover-xs.gif);
}
}
最佳答案
IE9 不支持媒体查询 在文本文件中添加以下 JS 代码并将其保存为 css-media-query-ie.js 名称并将其添加到目录然后在 html 页面的头部添加以下标签。
HTML
<head>
<!--[if lt IE 9]>
<script type="text/javascript" src="css-media-query-ie.js"></script>
<![endif]-->
</head>
css-media-query-ie.js
/*!
* CSS Media Queries for IE later than 9.0
* http://ghita.org/tipoftheday/css-media-queries-for-ie
* Copyright 2011, Serban Ghita
* Released under the GPL Licenses.
*/
var detectAndUseStylesheet = function(){
var currentWidth = screen.width,
// currentWidth = parseInt(document.documentElement.clientWidth),
//currentWidth = 320,
cssLinks = document.getElementsByTagName('link'),
_check = new RegExp(currentWidth, 'i'),
foundResolution = false,
allSupportedResolutions = [];
for(ii in cssLinks){
if(cssLinks[ii].href){
if(cssLinks[ii].id){
allSupportedResolutions.push(cssLinks[ii].id.match(/[0-9]+/i)[0]);
if(cssLinks[ii].id.match(_check)){
document.getElementById('stylesheet-'+currentWidth).removeAttribute('media');
foundResolution = true;
}
}
}
}
// Fallback if resolution is not found.
if(!foundResolution){
for(ii in allSupportedResolutions){
if(currentWidth<allSupportedResolutions[ii]){
document.getElementById('stylesheet-'+allSupportedResolutions[ii]).removeAttribute('media');
break;
}
}
}
}
window.attachEvent('onload', detectAndUseStylesheet);
引用 see more
关于css - 在@media 中替换背景图片会弄乱我在 ie9+ 中的背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25342339/
我是一名优秀的程序员,十分优秀!