精靈在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

回答

相關問題