Question

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

有什么建议吗？

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

Answer 1

在相关样式/类中溢出

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

此外，定位embed-responsive的{{1}}类也会限制此内容，因为它的overflow属性完全隐藏：

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

但是，如果您明确删除了<iframe>上的overflow-x: scroll;媒体资源，它应该按预期工作，并将内部网页上的<iframe>媒体资源设置为overflow-x：

auto

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

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

iframe水平滚动始终隐藏

2 个答案: