Widżet Chuck norris twitter traci styl na IE

Question

Występuje dziwny problem podczas asynchronicznego ładowania widgetu Twittera na IE. Ładuje się dobrze, ale z jakiegoś powodu nie stosuje żadnego stylu (kolor, tło są puste/domyślne) tylko w IE (7,8,9).

Ładowanie skryptu w standardowy sposób działa również w IE.

Kod wygląda i działa na wszystkich przeglądarkach (w tym IE, ale bez stylu)

<div id="twitter_div"></div> 
<script> 
    jQuery(window).load(function() { 
     jQuery('<link rel="stylesheet" type="text/css" href="http://widgets.twimg.com/j/2/widget.css" >').appendTo("head"); 
     jQuery.getScript('http://widgets.twimg.com/j/2/widget.js', function() { 
      var twitter = new TWTR.Widget({ 
       id: 'twitter_div', 
       version: 2, 
       type: 'profile', 
       rpp: 4, 
       interval: 6000, 
       width: 'auto', 
       height: 300, 
       theme: { 
       shell: { 
        background: '#add459', 
        color: '#382638' 
       }, 
       tweets: { 
        background: '#ffffff', 
        color: '#141114', 
        links: '#4aed05' 
       } 
       }, 
       features: { 
       scrollbar: false, 
       loop: false, 
       live: false, 
       hashtags: true, 
       timestamp: true, 
       avatars: false, 
       behavior: 'all' 
       } 
      }).render().setUser('chucknorris').start(); 
     }) 
    }) 
</script> 

Można to zobaczyć na żywo na this link.

Traci styl na IE, nawet gdy ustawiony jest na chucknorris.

Answer 1

Co sądzisz t O umieścić w css css jesteś właścicielem, aby uniknąć problemów

<style type="text/css"> 
#twitter_div .twtr-doc, #twitter_div .twtr-hd a, #twitter_div h3, #twitter_div h4 { 
background-color: #ADD459 !important; 
color: #382638 !important; 
} 
#twitter_div .twtr-bd, #twitter_div .twtr-timeline i a, #twitter_div .twtr-bd p { 
color: #141114 !important; 
} 
#twitter_div .twtr-avatar { 
display: none; 
} 
#twitter_div .twtr-new-results, #twitter_div .twtr-results-inner, #twitter_div .twtr-timeline { 
background: white !important; 
} 
#twitter_div .twtr-tweet a { 
color: #4AED05 !important; 
} 
</style> 

Również dobre jest to, jeśli umieścić go w pliku main.css aby uzyskać lepszy buforowania experince swojej statycznej rzeczy i to wszystko w jednym miejscu

<script> 
    jQuery(window).load(function() { 
     $("head").append("<link rel='stylesheet' type='text/css' href='http://widgets.twimg.com/j/2/widget.css' />"); 
     jQuery.getScript('http://widgets.twimg.com/j/2/widget.js', function() { 
      var twitter = new TWTR.Widget({ 
       id: 'twitter_div', 
       version: 2, 
       type: 'profile', 
       rpp: 4, 
       interval: 6000, 
       width: 'auto', 
       height: 300, 
       theme: { 
       shell: { 
        background: '#add459', 
        color: '#382638' 
       }, 
       tweets: { 
        background: '#ffffff', 
        color: '#141114', 
        links: '#4aed05' 
       } 
       }, 
       features: { 
       scrollbar: false, 
       loop: false, 
       live: false, 
       hashtags: true, 
       timestamp: true, 
       avatars: false, 
       behavior: 'all' 
       } 
      }).render().setUser('chucknorris').start(); 
     }) 
    }) 
</script> 

Answer 2

jak znaleźć tutaj: How to asynchronously load CSS using jQuery?

$("head").append("<link rel='stylesheet' type='text/css' href='http://widgets.twimg.com/j/2/widget.css' />"); 

aby kod skompletowany:

<div id="twitter_div"></div> 
<script> 
    jQuery(window).load(function() { 
     $("head").append("<link rel='stylesheet' type='text/css' href='http://widgets.twimg.com/j/2/widget.css' />"); 
     jQuery.getScript('http://widgets.twimg.com/j/2/widget.js', function() { 
      var twitter = new TWTR.Widget({ 
       id: 'twitter_div', 
       version: 2, 
       type: 'profile', 
       rpp: 4, 
       interval: 6000, 
       width: 'auto', 
       height: 300, 
       theme: { 
       shell: { 
        background: '#add459', 
        color: '#382638' 
       }, 
       tweets: { 
        background: '#ffffff', 
        color: '#141114', 
        links: '#4aed05' 
       } 
       }, 
       features: { 
       scrollbar: false, 
       loop: false, 
       live: false, 
       hashtags: true, 
       timestamp: true, 
       avatars: false, 
       behavior: 'all' 
       } 
      }).render().setUser('chucknorris').start(); 
     }) 
    }) 
</script> 

zmienił jakoś jest to jedyna rzecz, która wydaje się działać w IE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>test</title> 
    <link href="http://widgets.twimg.com/j/1/widget.css" type="text/css" rel="stylesheet"> 
    <link href="http://widgets.twimg.com/j/2/widget.css" type="text/css" rel="stylesheet"> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script> 
</head> 

<body> 

<div id="twitter_div"></div> 
<script type="text/javascript"> 
    $(document).ready(function() { 

      var twitter = new TWTR.Widget({ 
       id: 'twitter_div', 
       version: 2, 
       type: 'profile', 
       rpp: 4, 
       interval: 6000, 
       width: 'auto', 
       height: 300, 
       theme: { 
       shell: { 
        background: '#add459', 
        color: '#382638' 
       }, 
       tweets: { 
        background: '#ffffff', 
        color: '#141114', 
        links: '#4aed05' 
       } 
       }, 
       features: { 
       scrollbar: false, 
       loop: false, 
       live: false, 
       hashtags: true, 
       timestamp: true, 
       avatars: false, 
       behavior: 'all' 
       } 
      }).render().setUser('chucknorris').start(); 

    }) 
</script> 

</body> 
</html>