работает в ie9 и ff4 - не в ie7 или ie 8?

#javascript #css #internet-explorer-8 #internet-explorer-7

Вопрос:

Я написал этот скрипт некоторое время назад и модифицировал его, чтобы использовать css-спрайты для сокращения изображений. В ie9 и ff4 все работает идеально, однако я заметил, что это не будет отображаться в ie7 / ie8… Должно быть, проблема с css или js, но я, конечно, не вижу ничего, что могло бы помешать старым ie отображать код…

Я включил все содержимое ниже на «тестовую» страницу, которая включает в себя все… если кто-нибудь может указать мне, почему это не работает в ie7 или ie8, я был бы очень благодарен!

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">    
#social16 {height:16px;font-size:13px; color:#0066ff; font-weight:bold;}
#sb16 {margin: 0px; padding:0px; height:16px; display: inline;line-height:16px;}
#sb16 li {list-style-type:none;float:left;padding:0 5px 0 0;}
#sb16 li a {background:url(social.png);background-repeat:no-repeat;display: block;height: 16px;width:16px;}
#sb16 li a.item0 {background-position:0px 0px;}
#sb16 li a.item1 {background-position:-16px 0px;}
#sb16 li a.item2 {background-position:-32px 0px;}
#sb16 li a.item3 {background-position:-48px 0px;}
#sb16 li a.item4 {background-position:-64px 0px;}
#sb16 li a.item5 {background-position:-80px 0px;}
#sb16 li a.item6 {background-position:-96px 0px;}
</style>
</head>
<body>
<div id="social16"></div>
<script type="text/javascript">
(function(){

var sites = [
        ['Send to Facebook', 'http://www.facebook.com/sharer.php?u={url}amp;amp;t={title}'],
        ['Tweet This', 'http://twitter.com/share?text={title}amp;amp;url={url}'],
        ['Send to StumbleUpon', 'http://www.stumbleupon.com/submit?url={url}amp;amp;title={title}'],
        ['Digg This', 'http://digg.com/submit?phase=2amp;amp;url={url}amp;amp;title={title}'],
        ['Send to GoogleBuzz', 'http://www.google.com/buzz/post?message={title}amp;amp;url={url}'],        
        ['Send to Reddit', 'http://reddit.com/submit?url={url}amp;amp;title={title}'],
        ['Email to Friends', 'mailto:?subject={title}amp;amp;body={url}'],
    ];

var url = encodeURIComponent(location.href),
    url = url.replace( "#", "" ),
    title = encodeURIComponent(document.title),
    html = '<ul id="sb16"><li>Share this ... </li>';

for (var i = 0, len = sites.length; i < len; i  ) {
    var site = sites[i],
    link = site[1].replace('{url}', url).replace('{title}', title);

    html  = '<li><a class="item'   i   '" href="#" title="'   site[0]   '" onclick="window.open(''   link   '')"></a></li>';
}

html  = '</ul>';

document.getElementById("social16").innerHTML=(html);

})();
</script>
</body>
</html>

Ответ №1:

У вас есть запятая после последнего элемента sites :

 var sites = [
    //...
    ['Email to Friends', 'mailto:?subject={title}amp;amp;body={url}'],
    // -----------------------------------------------------------^
];

IE6 и IE7 это не нравится. Обычно это отображается как a null в конце массива, и в итоге вы получаете a null там, где вы его не ожидаете.

1. rofl — вот и все — я смотрел на это, кажется, несколько часов, и это все, что было … никогда не замечал этого … спасибо!

2. @user756659: Это первое, на что нужно обратить внимание, когда «это работает в X , но не в IE6 или IE7″. В любом случае, Алекс вошел первым, поэтому вы должны принять его ответ.

Ответ №2:

 var sites = [
        ...
        ['Email to Friends', 'mailto:?subject={title}amp;amp;body={url}'],
    ];

Ваш последний элемент имеет завершающий , . Удалите его.

Дальнейшее чтение.