Javascript chuck norris twitter小部件在IE上正在失去风格_Javascript_Jquery_Css_Asynchronous

Javascript chuck norris twitter小部件在IE上正在失去风格

javascript jquery css asynchronous

Javascript chuck norris twitter小部件在IE上正在失去风格,javascript,jquery,css,asynchronous,Javascript,Jquery,Css,Asynchronous,在IE上异步加载twitter小部件时遇到了一个奇怪的问题。它加载得很好，但由于某些原因，它只在IE（7,8,9）上应用任何样式（颜色、背景为空/默认）以标准方式加载脚本也适用于IE 代码如下所示，适用于所有浏览器（包括IE，但没有样式） jQuery（窗口）.load（函数（）{ jQuery（''）。附录（“标题”）； getScript（'http://widgets.twimg.com/j/2/widget.js，函数（）{ var twitter=newtwtr.Widget({

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

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

代码如下所示，适用于所有浏览器（包括IE，但没有样式）


jQuery（窗口）.load（函数（）{
jQuery（''）。附录（“标题”）；
getScript（'http://widgets.twimg.com/j/2/widget.js，函数（）{
var twitter=newtwtr.Widget({
id:“twitter_div”，
版本：2，
键入：“配置文件”，
rpp:4，
间隔时间：6000，
宽度：“自动”，
身高：300，
主题：{
外壳：{
背景：“#添加459”，
颜色：“#382638”
},  
推特：{
背景：“#ffffff”，
颜色：'#141114'，
链接：“#4aed05”
}   
},  
特点：{
滚动条：false，
循环：false，
生活：假，
hashtags:true，
时间戳：对，
阿凡达：错，
行为：“全部”
}   
}).render（）.setUser（'chucknorris'）.start（）；
})
})

你可以在现场看到这个

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

如下所示：

$（“head”）。追加（“”）；

要使代码完整，请执行以下操作：

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


jQuery（窗口）.load（函数（）{
$（“标题”）。附加（“”）；
getScript（'http://widgets.twimg.com/j/2/widget.js，函数（）{
var twitter=newtwtr.Widget({
id:“twitter_div”，
版本：2，
键入：“配置文件”，
rpp:4，
间隔时间：6000，
宽度：“自动”，
身高：300，
主题：{
外壳：{
背景：“#添加459”，
颜色：“#382638”
},  
推特：{
背景：“#ffffff”，
颜色：'#141114'，
链接：“#4aed05”
}   
},  
特点：{
滚动条：false，
循环：false，
生活：假，
hashtags:true，
时间戳：对，
阿凡达：错，
行为：“全部”
}   
}).render（）.setUser（'chucknorris'）.start（）；
})
})

编辑不知何故，这是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>


测试
$（文档）.ready（函数（）{
var twitter=newtwtr.Widget({
id:“twitter_div”，
版本：2，
键入：“配置文件”，
rpp:4，
间隔时间：6000，
宽度：“自动”，
身高：300，
主题：{
外壳：{
背景：“#添加459”，
颜色：“#382638”
},  
推特：{
背景：“#ffffff”，
颜色：'#141114'，
链接：“#4aed05”
}   
},  
特点：{
滚动条：false，
循环：false，
生活：假，
hashtags:true，
时间戳：对，
阿凡达：错，
行为：“全部”
}   
}).render（）.setUser（'chucknorris'）.start（）；
})

您认为如何将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>


#twitter#u div.twtr doc、#twitter#u div.twtr hd a、#twitter#div h3、#twitter#div h4{
背景色：#添加459！重要；
颜色：#382638！重要；
}
#twitter_div.twtr bd，#twitter_div.twtr timeline i a，#twitter_div.twtr bd p{
颜色：#141114！重要；
}
#twitter_div.twtr头像{
显示：无；
}
#twitter_div.twtr新结果，#twitter_div.twtr结果内部，#twitter_div.twtr时间线{
背景：白色！重要；
}
#twitter_div.twtr tweet a{
颜色：#4AED05！重要；
}

如果将它放在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（窗口）.load（函数（）{
$（“标题”）。附加（“”）；
getScript（'http://widgets.twimg.com/j/2/widget.js，函数（）{
var twitter=newtwtr.Widget({
id:“twitter_div”，
版本：2，
键入：“配置文件”，
rpp:4，
间隔时间：6000，
宽度：“自动”，
身高：300，
主题：{
外壳：{
背景：“#添加459”，
颜色：“#382638”
},  
推特：{
背景：“#ffffff”，
颜色：'#141114'，
链接：“#4aed05”
}   
},  
特点：{
滚动条：false，
循环：false，
生活：假，
hashtags:true，
时间戳：对，
阿凡达：错，
行为：“全部”
}   
}).render（）.setUser（'chucknorris'）.start（）；
})
})

我发现加载到lightbox中的页面存在类似问题。尝试将样式添加到加载小部件的文档中。您能详细说明一下吗？我不确定我是否完全理解如果这在普通用户身上不起作用，甚至不要尝试Chuck Norris当然你并不是在暗示Chuck Norris可能会失去风格。Chuck Norris不需要Twitter。他已经在跟踪你了我试过了

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

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