Спрайты не отображаются правильно в IE 6,7,8

Question

Спрайты не отображаются правильно в IE 6,7,8

0

:-) Smiley - лицо в начале, но это действительно раздражает меня. Как видно из названия, ПОЗИЦИОНИРОВАНИЕ ЭЛЕМЕНТОВ В IE 6,7 И 8 (по крайней мере) выключено. Я включаю прямой URL: http://evolvedtools.com/Genr8Mobi.html. Теперь эта страница, как правило, перенаправляется с полноразмерной страницы и в разумном браузере (Read: all bar Internet explorer), все хорошо. Страница предназначена для браузера небольшого формата или для мобильных устройств, но для CSS также используется 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="/respond.min.js"></Script>
<Script type="text/javascript" src="/Javascript Cookie Script.js"></Script>
<!--<Script type="text/javascript" src="/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, но ничего не регистрируется. Главный вопрос, хотя и остается: почему 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, но я бы очень благодарен за понимание :-)

PushT 28 нояб. 2013, в 15:28

Источник

Теги:

html

css3

internet-explorer

css-sprites

1 ответ

Ещё вопросы

Spudley · Accepted Answer · 2013-11-28T13-33-00.000Z

@media не поддерживается IE8 или ранее. Весь ваш код CSS находится внутри блока @media и, следовательно, не будет отображаться этими браузерами.

Вы можете использовать polyfill like response.js, чтобы справиться с этим, что, вероятно, поможет (хотя я не могу ручаться за производительность, если вам нужно поддерживать браузеры как старые как IE8).

Но, честно говоря, большая часть этого CSS-кода не должна находиться внутри блока @media; медиа-блоки должны содержать только стили, которые вы хотите отличать от обычных для данного размера экрана. Все, что такое же нормальное, должно храниться вне медиа-блока.

Если вы просто это сделаете, есть хороший шанс, что вам даже не нужно беспокоиться о response.js, если вы можете заставить CSS по умолчанию за пределами медиаблоков быть тем, как вы хотите, чтобы IE6/7/8 вел себя; то медиа-блоки могут быть только для переопределений для браузеров в разных размерах.

[РЕДАКТИРОВАТЬ]

Вы отредактировали этот вопрос, и теперь я вижу, что вы уже используете response.js, поэтому, надеюсь, это означает, что вышеупомянутое не является основной проблемой. Я все же думаю, что вам нужно уменьшить размер вашего кода медиа-запросов; там много CSS, которые действительно не должны быть в медиа-запросе.

Другая проблема, с которой вы столкнулись, заключается в том, что вы используете background-size для своего спрайт-изображения.

Это еще одна функция CSS, которая не поддерживается IE8 и ранее, и это, безусловно, сломает ваши спрайты. Фактически это ослабляет всю концепцию использования фоновых изображений для спрайтов в IE8.

Опять же, для этой функции есть полисы, вы можете заставить ее работать в IE8, если вы решились. См. Здесь ссылки на несколько возможных вариантов. Обычно я рекомендую CSS3Pie для такого рода вещей, но, как вы видите, это не единственный вариант, поэтому выберите тот, который лучше всего подходит для вас.

Всегда помните, что чем больше скриптов полифония вы используете, и тем больше вы просите их сделать, тем больше будет влияние производительности.

Здравствуй! Спасибо за ответ :-) Если вы посмотрите, вы увидите включение response.js в шапку. И когда вы говорите, что IE8 и более ранние версии не поддерживают @media, что именно это влечет за собой, потому что очевидно, что CSS применяется частично. Как бы вы сказали, это лучший способ настроить CSS в этом случае? Проблема для меня, кажется, в том, что нет «нормальных» случаев, все нужно растягивать, изменять и корректировать.
Будет ли лучшим решением стандартная таблица стилей без медиа блока + extra @media для lt IE 9 + extra для рабочего стола? Я не хочу перенаправлять обратно на другую страницу только потому, что кто-то может растянуть область просмотра своего браузера (или установить для своего мобильного браузера другой уровень масштабирования)
Здравствуй. Когда я опубликовал ответ, вопроса о включении response.js не было, но, если честно, если вы его уже получили, это хорошее начало.
Что касается вашего второго комментария, то да, лучший способ сделать медиазапросы - это использовать как можно больше вашего CSS за пределами медиазапросов. Медиа блок должен содержать минимум кода. В частности, для IE <= 8 это окажет заметное влияние на производительность, если ничего больше.
Хорошо, я отредактировал ответ с целой кучей новых вещей. Надеюсь, что это попадает в цель лучше, чем моя первая попытка :)
Отличная обратная связь! Thanx! Я сократил разметку до минимума, поставил «нормальный» css вне медиа-запроса, и я собираюсь взглянуть на ссылку. Я могу видеть проблему проблемы размера фона в отображении изображения, но когда я опускаюсь в размере изображения и удаляю атрибут «background-size», чтобы избавиться от проблемы, у меня все еще есть две проблемы: первая является то, что изображение становится несколько нечитаемым для использования в меню. Во-вторых, все еще существует постоянная проблема смещения между IE 6,7–8 для других браузеров. Все остальные браузеры в целом отображаются хорошо, но IE ..... :-(
Отличная ссылка, мне нужно много тестировать :-)