替换@media 中的背景图片会弄乱我在 ie9+ 中的背景图片答案

【问题标题】：Replacing background image in @media is messing up my background image in ie9+替换@media 中的背景图片会弄乱我在 ie9+ 中的背景图片
【发布时间】：2014-10-10 03:05:37
【问题描述】：

当我在@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);
}
}

【问题讨论】：

我建议你使用精灵（或者字体图标，如果它们是实心的）。

标签： css image media-queries background-image

【解决方案1】：

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

【讨论】：

感谢您的回答，但这并不能解决我的问题。直到我在媒体查询中将背景图像更改为较小的图像 (.gifs) 之前，它都可以正常工作。然后不再显示背景图像。也许与大小有关？
除上述注释外：IE+ 中不显示背景图像。您的回答似乎解决了 IE9 的问题-
似乎@media 中的背景图像无法覆盖外部背景属性，请尝试在任何地方使用其中之一。尝试！在查询中也很重要。对于背景大小，请参阅here