Question

我正在使用Twitter API开展项目。基本上，输入用户名，它会提取用户的推文并在页面上呈现它们。它在Twitter提供嵌入式推文的典型卡片中呈现它们。我想改变牌的高度。

通过选择元素并将"height: 600px;"添加到类".EmbeddedTweet"，可以轻松更改检查器中卡片的高度，但是，当我在CSS文件中应用相同的更改时保存并刷新页面，不会出现更改。为什么更改会出现在检查器中，而不是在重新加载页面时？

我之前没有遇到过这个问题。我是一名新手。我怎样才能让变化坚持下去？感谢。

示例代码：（从Twitter API发回的已发送推文）

<div class="EmbeddedTweet EmbeddedTweet--edge 
            js-clickToOpenTarget
            tweet-InformationCircle-widgetParent" 
     data-click-to-open-target="https://twitter.com/username/status/947824196909961216" 
     data-iframe-title="Twitter Tweet"
     data-dt-full="%{hours12}:%{minutes} %{amPm} - %{day} %{month} %{year}"
     data-dt-explicit-timestamp="8:37 AM - Jan 1, 2018" 
     data-dt-months="Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec"  
     data-dt-am="AM"         data-dt-pm="PM"   data-dt-now="now" 
     data-dt-s="s"           data-dt-m="m"     data-dt-h="h"
     data-dt-second="second" data-dt-seconds="seconds" 
     data-dt-minute="minute" data-dt-minutes="minutes" 
     data-dt-hour="hour"     data-dt-hours="hours" 
     data-dt-abbr="%{number} %{symbol}" 
     data-dt-short="%{day} %{month}"   data-dt-long="%{day} %{month} %{year}" 
     data-scribe="page:tweet" 
     id="twitter-widget-0" 
     data-twitter-event-id="0" 
     lang="en">

为该推文添加CSS属性：

.EmbeddedTweet {
    height: 600px;
}

添加!important以及清除缓存似乎没有任何区别。

Answer 1

根据我对iframe的体验，特别是与twitter apps / apis的关系，可以完全阻止css，不允许对其进行任何更改。您可能需要找到一个更具延展性的选项来嵌入推文？

Answer 2

您无法使用CSS影响iframe的内容。

您是否查看了有关自定义CSS的Twitter for websites文档部分？

这里还有一个触及高度主题的常见问题解答; How can I create an Embedded Tweet of a consistent height? 这严格说：

嵌入式推文要求最小宽度为220像素，最多可填充550个水平像素。

Twitter和其他人对于他们的小部件的外观有点具体，所以他们可能不会让你嘲笑它们。对于布局中的任何类型的更改，您可以尝试这样做：将会话和卡参数设置为false以将推文显示限制为其基本格式。

希望这有帮助！

Answer 3

可能你已经尝试但仍然 1.我建议你检查是否有任何css被覆盖？ 2.根据heirarchy尝试给css。

CSS更改显示在检查器中，但不会在实际CSS文件中应用更改并刷新

3 个答案: