在查克·诺里斯Twitter的插件正在失去对IE浏览器的风格 [英] The chuck norris twitter widget is losing style on IE

问题描述

在IE异步加载Twitter的小部件时，遇到了一个奇怪的问题。它加载就好了，但由于某种原因不适用任何样式（颜色，背景是空白/默认）只对IE（7,8,9）。

Getting a strange problem when loading the twitter widget asynchronously on IE. It loads just fine, but for some reason doesn't apply any style (color, background are blank/default) only on IE (7,8,9).

加载脚本的标准方法也适用于IE浏览器。

Loading the script the standard way works also in IE.

在code看起来像这一点，并适用于所有的浏览器（包括IE，但没有风格）

The code looks like this and works on all browsers (including IE, but without the style)

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

您可以看到这个住在此链接。

它失去，即使设置为查克·诺里斯在IE浏览器的样式。

It loses the style on IE even when set to chucknorris.

推荐答案

您觉得把CSS在你自己的CSS避免问题

What you think to put the css in you own css to avoid problems

<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文件，以获得的静态的东西更好的缓存的遭遇，是在同一个地方

Also good is it if put it in your main.css file to get a better caching experince of your static stuff and is all in one place

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

这篇关于在查克·诺里斯Twitter的插件正在失去对IE浏览器的风格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！