iframe 水平滚动始终隐藏答案

【问题标题】：Iframe horizontal scroll is always hiddeniframe 水平滚动始终隐藏
【发布时间】：2016-05-02 16:49:27
【问题描述】：

我的 iframe 的水平滚动始终是隐藏的，但我想在我的网页上看到它的 scroll-x。我不明白为什么 scroll-x 永远不会出现？ scroll-y 确实出现了，但水平的没有出现。

有什么建议吗？

        <div class="row">
            <div class="col-sm-8 col-sm-push-4">
                <div class="embed-responsive embed-responsive-4by3">
                    <iframe class="embed-responsive-item"   src="http://fr.lichess.org/training/29058" style="overflow-x: scroll;"></iframe>
                </div>
            </div>
        </div>

【问题讨论】：

标签： html css twitter-bootstrap iframe

【解决方案1】：

相关样式/类中的溢出

在检查了 <iframe> 目标的 CSS 之后，看起来 <body> 似乎通过 overflow-x 属性明确限制了这一点，如下所示：

此外，针对您的<iframe> 的embed-responsive 类也将限制这一点，因为它的overflow 属性完全隐藏：

解决方案（如果您可以调整内页）

但是，如果您明确删除 <iframe> 上的 overflow-x: scroll; 属性，它应该会按预期工作并将内页上的 overflow-x 属性设置为 auto ：

/* Adjust this in your inner page (common.css, line 906) */
body {
    /* Other styles omitted for brevity */
    overflow-x: auto;
}

然后您应该会看到它按预期工作：

【讨论】：

那么如果我的 iframe 的目标限制了 overflow-x 属性，我就无法解决问题？
您是否有权调整目标页面的overflow-x 属性？这将是最简单的解决方案，因为该内页的 <body> 样式明确导致 overflow-x 属性被忽略。
访问目标页面的overflow-x ?我不是那个象棋网站的站长。所以我无法访问该国际象棋网站的 CSS 属性。我希望我明白你在说什么......？
我不知道您是否可以访问它。如果您不这样做，那么您将能够在网站上调整的内容非常有限。导致问题的样式需要被覆盖以避免这种情况，如果它与您的站点不在同一个域中，如果您尝试通过 Javascript 设置它（其中基本上是尝试解决它的一种非常骇人听闻的方式）。
好的，那么我非常感谢您向我解释了所有问题。我选择了另一个目标网站在我的网站上嵌入国际象棋游戏。我接受你的回答祝你晚上好。

【解决方案2】：

.embed-responsive 的 overflow 属性设置为 hidden。

.embed-responsive-item 没有 overflow 属性。

试试这个：

<div class="row">
    <div class="col-sm-8 col-sm-push-4">
        <div class="embed-responsive embed-responsive-4by3" style="overflow-x: scroll;">
             <iframe class="embed-responsive-item" src="http://fr.lichess.org/training/29058"></iframe>
        </div>
     </div>
</div>

【讨论】：