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

:-) 012-笑脸 - 在开始的时候脸就在那里，但这对我来说真的很刺激。从标题中可以看出，IE 6,7和8中的元素定位（至少）是关闭的。我包括直接网址：http://evolvedtools.com/Genr8Mobi.html。现在这个页面通常是一个全尺寸页面的重定向，并且在一个合理的浏览器（阅读：一切条形图Internet Explorer）上，一切都呈现良好。该页面适用于小型浏览器或移动设备，但它也可以在单独的样式表中使用桌面css。调整浏览器窗口的大小以查看它的工作原理。精灵在IE中无法正确显示6,7,8

这里的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和调试栏来测试。我试图改变一切在CSS中，但没有注册。主要问题仍然存在：为什么o为什么精灵不能在较老的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文件，但我将如何去纠正我的CSS/HTML此显示正确在IE6,7和8？
只是要清楚 - 我不会改变我所有的HTML和CSS只是页面显示与旧的IE浏览器，但我真的很感激一个小的洞察力:-)

来源

2013-11-28 PushT

@media不IE8或支持早。您的所有CSS代码都在@media区块内，因此这些浏览器不会看到。

您可以使用像respond.js这样的polyfill来处理这可能会有所帮助（尽管如果您需要支持与IE8一样大的浏览器，我无法保证性能）。

但说实话，大多数CSS代码不应该在@media块内;媒体块应该只包含您希望与给定屏幕大小不同的样式。与正常情况相同的一切应该保留在媒体块之外。

如果你这么做的话，如果你可以在媒体块之外获得默认的CSS来让IE6/7/8运行，那么很有可能你甚至不需要担心respond.js ;那么媒体块就可以用于覆盖不同大小窗口中的浏览器。

[编辑]

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

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

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

此外，这个功能还有polyfills，如果你确定你可以在IE8中使用它。See here可以链接到几个可能的选项。我通常推荐CSS3Pie用于这种事情，但正如你所看到的，它不是唯一的选择，所以选择最适合你的那个。

请务必记住，您使用的填充脚本越多，要求他们做得越多，它对性能的影响就越大。

来源

2013-11-28 15:22:27 Spudley

嗨！感谢您的回复:-)如果您看起来您看到在标题中包含respond.js。而当你说IE8和更早的版本不支持@media时，究竟是什么引起的，因为显然这个CSS正在被部分应用。你会怎么说是在这种情况下设置CSS的最佳方式？对我来说问题似乎是没有“正常”的情况，所有事情都需要被延伸，调整和调整。 – PushT

对于桌面的lt IE 9 +额外版本，最佳解决方案是没有媒体块+额外@media的标准样式表？我不想仅仅因为有人可能拉伸他们的浏览器视口而重定向到另一个页面（或将他们的移动浏览器设置为不同的缩放级别） – PushT

嗨。当我发布答案时，包含respond.js并不是问题的关键，但如果你已经有了这个答案，那么这个问题就够公平了，那么这是一个好的开始。 – Spudley

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

回答

相关问题