Tiện ích con chuck norris twitter đang mất phong cách trên IE

Question

Gặp sự cố lạ khi tải tiện ích con twitter không đồng bộ trên IE. Nó tải tốt, nhưng vì một số lý do không áp dụng bất kỳ kiểu nào (màu, nền trống/mặc định) chỉ trên IE (7,8,9).

Tải tập lệnh theo cách chuẩn cũng hoạt động trong IE.

Mã này trông như thế này và hoạt động trên tất cả các trình duyệt (bao gồm IE, nhưng không có phong cách)

<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> 

Bạn có thể thấy điều này sống trên this link.

Nó mất kiểu trên IE ngay cả khi được đặt thành chucknorris.

Answer 1

Điều bạn nghĩ là t o đặt css trong bạn sở hữu css để tránh các vấn đề

<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> 

Cũng tốt là nó nếu đặt nó trong file main.css của bạn để có được một bộ nhớ đệm experince tốt hơn về những thứ tĩnh của bạn và là tất cả ở một nơi

<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

như được tìm thấy ở đây: How to asynchronously load CSS using jQuery?

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

để làm cho đoạn code hoàn chỉnh:

<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> 

chỉnh sửa bằng cách nào đó đây là điều duy nhất mà dường như làm việc trong 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>