Question

手动实施Disqus只给我一个1px的iframe。从开发人员工具中删除该行显示Disqus。无法找到任何使用Google遇到同样问题的人。

控制台中没有显示错误。

这是它最终会显示的代码：

<iframe 
  id="dsq-app1" 
  name="dsq-app1" 
  allowtransparency="true" 
  frameborder="0" 
  scrolling="no" 
  tabindex="0" 
  title="Disqus" 
  width="100%" 
  src="url.html&amp;s_o=default" 
  style="
    width: 1px !important; /* Here it's defined by default */
    min-width: 100% !important; 
    border: none !important; 
    overflow: hidden !important; 
    height: 933px !important;" 
  horizontalscrolling="no" 
  verticalscrolling="no">
</iframe>

它已编译并在iframe中，因此我无法控制它，将宽度设置为100％将被iframe覆盖

也许有人也遇到过这个问题？

Answer 1

添加父div并将宽度设置为100％

<div id="disqus_thread_parent">
    <div id="disqus_thread"></div>
</div

CSS

#disqus_thread_parent{ width: 100%;}

Answer 2

我在WordPress中使用此插件时遇到了同样的问题，我在环境中找到了原因。属性display:flex导致了这个问题，所以我把这段代码

<div class="main-content">
    <div class="content">...</div>
    <iframe id="dsq-app*">...
</div>

和CSS

.main-content {
    display: block;
}

如果您使用网格布局，我相信这会对您有所帮助。

手动安装Disqus，只显示带有1px！重要的disqus_thread iframe

2 个答案: