精灵在IE 6,7,8中无法正确显示

时间：2013-11-28 13:29:15

标签： html internet-explorer css3 css-sprites

:-) 笑脸 - 从一开始就面对，但这对我来说真的很烦人。 从标题中可以看出，IE 6,7和8中的元素定位（至少）是关闭的。我包括直接网址：http://evolvedtools.com/Genr8Mobi.html。 现在这个页面通常是从一个完整大小的页面重定向，并在一个合理的浏览器上（阅读：一切都是Internet Explorer），一切都很好。该页面适用于小型浏览器或移动设备，但它也有单独样式表中的桌面css。调整浏览器窗口大小以查看其工作原理。

这是html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Genr8</title>

<!--[if lt IE 9]>
<link href="PuzzleMobileIE.css" rel="stylesheet" type="text/css" media="screen and (max-width: 649px), screen and (max-width: 767px) and (min-device-height:320px)" id="stylesheet-PIEmob" >
<link href="DesktopIE.css" rel="stylesheet" type="text/css" media="screen and (min-width: 651px) and (min-height: 650px)" id="stylesheet-DTIE" >
<![endif]-->
<link href="PuzzleMobile.css" rel="stylesheet" type="text/css" media="screen and (max-width: 649px), screen and (max-width: 767px) and (min-device-height:320px)" id="stylesheet-Pmob" >

<link href="PuzzlePad.css" rel="stylesheet" type="text/css" media="screen and  (min-width: 650px) and (max-width: 1024px)" id="stylesheet-Pad" >

<link href="Desktop.css" rel="stylesheet" type="text/css" media="screen and (min-width: 651px) and (min-height: 650px)" id="stylesheet-DT" >

<Script type="text/javascript" src="Scripts/js/Respond/Respond-master/dest/respond.min.js"></Script>
<Script type="text/javascript" src="Javascript Cookie Script.js"></Script>
<!--<Script type="text/javascript" src="Scripts/js/css3-mediaqueries.js"></script>-->
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
</script>
</head>

<body onload="MM_preloadImages('images/puzPlugin_56.png','images/HomeButton_03.png','images/AnimasjonMotsatt.gif','images/puzzleGenr8SpriteFull.png','images/Spritepuz1.png')">



<div class="puzzle">
<div class="puzzle2">

<div id="homeGenr8"><a href="index.html"><img src="images/HomeButton_03.png" alt="HomeG8MobAlt" name="homeGenr8" width="100%" id="homeGenr82" ></a></div>

<div id="Genr8Flash"><a href="FillingIn4.html"><img src="images/AnimasjonMotsatt.gif" alt="FlashG8MobAlt" name="Genr8Flash" width="100%" id="Genr8Flash2" ></a></div>

<div id="puzzleK"><a href="Plugins/Genr8OldPlusNew.rar"><img src="images/puzPlugin_56.png" alt="PluginsG8Alt" name="puzzleK" width="100%" class="AllElements" id="puzzleK2" ></a></div>

</div>
<ul id="navlist">
  <li id="Intro"><a href="Genr8PageIntro.php"></a></li>
  <li id="Source"><a href="SourceCode.html"></a></li>
 </ul>
<ul id="navlist2">
  <li id="genr82001"><a href="GENR8litt/genr8MartinHemberg.pdf"></a></li>
  <li id="compDebug"><a href="CompileAndDebug.html"></a></li>
  </ul>
  <ul id="navlist3">
<li id="pWorkings"><a href="PluginWorkings.html"></a></li>
 </ul>
  <ul id="navlist4">
<li id="analysis"><a href="Genr8Analysis.html"></a></li>
 </ul>
  <ul id="navlist5">
 <li id="g8new"><a href="Genr82011.php"></a></li>
 </ul>
 </div>

  <Script type="text/javascript" src="BodyScriptGenr8.js"></Script>

</body>
</html>

从标题中可以看出，我试图为IE8和更低版本添加一个单独的样式表，但似乎没有区别。我正在使用IETester和debugbar进行测试。 我试图改变css中的所有内容，但没有注册。主要问题仍然存在：为什么为什么这些精灵不能与旧的IE合适？

用于“移动”或小窗口桌面的CSS：

@charset "utf-8";
/* CSS Document */

@media screen and (max-width: 649px), screen and (max-width: 767px) and (min-device-height:320px){

    body {
    background-color: #000!important;
}
a:link {
    text-decoration: #000;
}
a:visited {
    text-decoration: #000;
}
a:hover {
    text-decoration: #000;
}
a:active {
    text-decoration: #000;
}

img {
    border:0;
 }

.puzzle {
    display: block;
    position: absolute;
    width:290px;
    height:282px;
    margin-left: -145px;
    margin-top: -141px;
    /*margin-left: auto;*/
    /*left: auto;
    top: auto;*/
    top: 50%;
    left: 50%;
    background-image: url(images/puzzleGenr8SpriteFullMob.png);
    /*_background-image: url(images/puzzleGenr8SpriteFullMob.gif);*/ /*IE6*/
    background-size:290px 282px!important;
    background-position: 0px 0px;
    z-index: 1;
    background-repeat: no-repeat;
}
.puzzle2 {
    position: relative;
    z-index: 2;
    display:block;
    background-color: #000!important;
}
#homeGenr8 {
    display: block;
    position: absolute;
    height: 28px;
    width: 69px;
    left: 0px;
    top: 0px;
    visibility: visible;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
/*html>body #homeGenr8
{
width: auto;
height: auto;
min-width: 69px;
min-height: 28px;
}
*/
#Genr8Flash {
    display: block;
    position: absolute;
    height: 28px;
    width: 62px;
    top: 0px;
    left: 228px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}

#puzzleK {
    display: block;
    position: absolute;
    visibility: visible;
    height: 28px;
    width: 63px;
    left: 227px;
    top: 254px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}


#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:-8px;}
#navlist li, #navlist a{height:23px;display:block;}
/*#backG{left:0px;width:580px;height:563px;}
#backG{background:url('images/puzzleGenr8SpriteFull.png') 0 0;}*/

#Intro{left:85px;width:50px;height:23px;}
#Intro{background:url('images/puzzleGenr8SpriteFull.png') -83px -5px;background-size: 290px 282px; background-repeat:no-repeat;}
#Intro a:hover{background: url('images/Spritepuz1Mob.gif') -83px -5px;
background-size: 290px 282px; background-repeat:no-repeat;}

#Source{left:152px;width:58px;height:14px;}
#Source{background:url('images/puzzleGenr8SpriteFull.png') -152px -8px;
background-size: 290px 282px; background-repeat:no-repeat;}
#Source a:hover{background: url('images/Spritepuz1Mob.gif') -152px -8px;
background-size: 290px 282px; background-repeat:no-repeat;}

#navlist2{position:relative;}
#navlist2 li{margin:0;padding:0;list-style:none;position:absolute;top:22px;}
#navlist2 li, #navlist2 a{height:28px;display:block;}

#genr82001{left:31px;width:50px;height:27px;}
#genr82001{background:url('images/puzzleGenr8SpriteFull.png') -28px -38px;
background-size: 290px 282px; background-repeat:no-repeat;}
#genr82001 a:hover{background: url('images/Spritepuz1.gif') -28px -38px;
background-size: 290px 282px; background-repeat:no-repeat;}

#compDebug{left:220px;width:60px;height:20px;}
#compDebug{background:url('images/puzzleGenr8SpriteFull.png') -220px -38px;
background-size: 290px 282px; background-repeat:no-repeat;}
#compDebug a:hover{background: url('images/Spritepuz1Mob.gif') -220px -38px;
background-size: 290px 282px; background-repeat:no-repeat;}

#navlist3{position:relative;}
#navlist3 li{margin:0;padding:0;list-style:none;position:absolute;top:63px;}
#navlist3 li, #navlist3 a{height:23px;display:block;}

#pWorkings{left:147px;width:55px;height:23px;}
#pWorkings{background:url('images/puzzleGenr8SpriteFull.png') -147px -75px;
background-size: 290px 282px; background-repeat:no-repeat;}
#pWorkings a:hover{background: url('images/Spritepuz1Mob.gif') -147px -75px;
background-size: 290px 282px; background-repeat:no-repeat;}

#navlist4{position:relative;}
#navlist4 li{margin:0;padding:0;list-style:none;position:absolute;top:105px;}
#navlist4 li, #navlist4 a{height:27px;display:block;}

#analysis{left:25px;width:53px;height:23px;}
#analysis{background:url('images/puzzleGenr8SpriteFull.png') -20px -120px;
background-size: 290px 282px; background-repeat:no-repeat;}
#analysis a:hover{background: url('images/Spritepuz1Mob.gif') -20px -120px;
background-size: 290px 282px; background-repeat:no-repeat;}

#navlist5{position:relative;}
#navlist5 li{margin:0;padding:0;list-style:none;position:absolute;top:221px;}
#navlist5 li, #navlist5 a{height:27px;display:block;}

#g8new{left:12px;width:55px;height:23px;}
#g8new{background:url('images/puzzleGenr8SpriteFull.png') -7px -232px;
background-size: 290px 282px; background-repeat:no-repeat;}
#g8new a:hover{background: url('images/Spritepuz1Mob.gif') -7px -232px;
background-size: 290px 282px; background-repeat:no-repeat;}

}

我在css文件中收到有关background-size的警告，但是我如何更正我的css / html以便在IE6,7和8中正确显示？ 只是要清楚 - 我不会改变我的所有html和CSS只是为了显示旧IE的页面，但我真的很感激有点洞察力： - ）

1 个答案:

答案 0 :(得分：0)

IE8或更早版本不支持

@media。您的所有CSS代码都在@media块内，因此这些浏览器不会看到它们。

你可以使用像respond.js之类的polyfill来处理这个问题，这可能会有所帮助（如果你需要支持IE8这样的浏览器，我无法保证性能）。

但老实说，大多数CSS代码不应该在@media块内;媒体块应仅包含您希望与给定屏幕大小的法线不同的样式。与正常情况相同的所有内容都应保留在媒体块之外。

如果您只是这样做，那么您很可能甚至不需要担心respond.js，如果您可以获得媒体块之外的默认CSS，就像您希望IE6 / 7/8的行为一样;然后媒体块可以用于覆盖不同大小的窗口中的浏览器。

[编辑]

你已经编辑了这个问题，我现在看到你已经在使用respond.js了，所以希望这意味着上面不是主要问题。我仍然认为你需要减少媒体查询代码的大小;那里有很多CSS，实际上不应该在媒体查询中。

您遇到的另一个问题是您使用background-size作为精灵图像。

这是IE8及更早版本不支持的另一个CSS功能，这肯定会打破你的精灵。事实上，它削弱了在IE8中使用背景图像作为精灵的整个概念。

此外，还有针对此功能的polyfill，如果您确定，可以在IE8中使用它。 See here指向一些可能的选项的链接。我通常会推荐CSS3Pie来做这类事情，但是你可以看到它不是唯一的选择，所以选择最适合你的那个。

请记住，您使用的填充程序脚本越多，您要求它们执行的越多，它对性能的影响就越大。

相关问题
最新问题