chucknorris的twitter小部件在IE上正在失去风格

The chuck norris twitter widget is losing style on IE

本文关键字：失去 风格 IE chucknorris twitter 小部      更新时间：2023-09-26

在IE上异步加载twitter小部件时遇到一个奇怪的问题。它加载得很好，但由于某些原因，它只在IE（7,8,9）上应用任何样式（颜色、背景为空/默认）。

以标准方式加载脚本也适用于IE。

代码看起来像这样，适用于所有浏览器（包括IE，但没有样式）

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

你可以在这个链接上看到这个直播。

即使设置为chucknorris，它也会失去IE上的风格。

您认为如何将css放在自己的css中以避免问题

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

同样好的是，如果把它放在你的main.css文件中，以获得更好的静态内容缓存体验，并且是在一个地方

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

如下所示：如何使用jQuery异步加载CSS？

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

使代码完整：

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

编辑不知何故，这是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>
相关文章：