Twitter 小部件 + 自定义滚动条使提要的样式消失答案

【问题标题】：Twitter widget + custom scrollbar makes styling of the feed disappearTwitter 小部件 + 自定义滚动条使提要的样式消失
【发布时间】：2016-09-13 19:53:47
【问题描述】：

我在我的网站 (wordpress) 的 twitter 小部件上遵循了自定义侧边栏指南。不幸的是，小部件附带的样式在使用侧边栏后消失了。 Why only HTML left?。

我尝试编写自己的 CSS 并通过谷歌搜索几个小时找到解决方案，但似乎没有其他人有这个问题。大多数帖子都是关于糟糕的可定制性的咆哮。我检查了整个代码，但我找不到问题。我希望你们能帮助我！

指导并单击演示以了解其外观：http://manos.malihu.gr/add-a-custom-scrollbar-to-your-twitter-widget/

代码如下：

<html>
<head>
    <!-- custom scrollbar CSS -->
    <link rel="stylesheet" type="text/css" href="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css">
    <!-- jQuery lib -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- custom scrollbar plugin script -->
    <script type="text/javascript" src="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>

     <script>
             (function($){
                $(window).load(function(){
                 /* initialize scrollbar */
                $("#twitter-widget-holder").mCustomScrollbar({
                    theme:"dark-3",
                    scrollButtons:{enable:true}
                      });
      !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
    });
  })(jQuery);
</script>

</head>
    <body>
        <div id="twitter-widget-holder">
            <a class="twitter-timeline" href="https://twitter.com/hashtag/korting" width="100%" height:"600px" data-widget-id="732565652418990081" data-chrome="transparent noscrollbar" data-tweet-limit="10">Tweets over #korting</a>
        </div>

    </body>
</html>

编辑使用过的css：

#twitter-widget-holder, .twitter-timeline { height:800px; padding:20px; background:#fff; border-radius:3px; box-shadow:2px 2px 3px rgba(0,0,0,.1); }

【问题讨论】：

我们可以看看你的自定义 CSS 吗？
非常基本，但这里是：' #twitter-widget-holder, .twitter-timeline { height:800px;填充：20px；背景：#fff;边框半径：3px；盒子阴影：2px 2px 3px rgba(0,0,0,.1); }

标签： javascript css wordpress twitter scrollbar

【解决方案1】：

我注意到您的代码中有两件事需要解决：

在 <a class="twitter-timeline">...</a> 中，您将高度列为无效的 height:"600px"。
您的示例中缺少以下 CSS。

#twitter-widget-holder { max-height:400px; max-width:320px; padding:20px; background:#fff; border-radius:3px; box-shadow:2px 2px 3px rgba(0,0,0,.1); }

我继续进行了这些更正，它似乎工作正常：http://codepen.io/johnniebenson/pen/PNrOpV

如果有帮助，请告诉我！

【讨论】：

这修复了它。多么疏忽……谢谢！