Question

我一直在研究将我的游戏门户网站的固定宽度/高度iframe转换为响应式，我发现了一些来自人们的不同建议，其中我做了一个针对我的iframe类的CSS添加工作得非常好使一切响应，但当我在ipad上专门使用Safari浏览器进行测试时，游戏开头出现的广告开始向下飞行，因此无法开始游戏。

你能帮我解决这个问题吗？ 以下是更多细节：

在我的文章中，我有我的iframe游戏嵌入在以下代码中：

<center>
<div class="game-responsive-container" style="padding-bottom: 66.81%;">
  <iframe src="GAMEURL" frameborder="0" scrolling="no"></iframe>
</div>
</center>

FYI1：班级＆＃34;游戏敏感型容器＆＃34;是我在CSS中的目标（如下所示）。 FYI2：填充底部是每页专用的，因为每个游戏可能有不同的高度。

在我的CSS中，我有以下与此问题相关的内容：

.game-responsive-container {
  position: relative;
  height: 0;
  overflow: hidden;
}

.game-responsive-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

再说一次，我可以告诉它在计算机上运行得很好但在Safari浏览器上会出现问题，在视觉上你看到广告出现在iframe的中心，然后向下飞，直到它消失，因此游戏确实不再加载使其无法播放。

通过一些额外的测试，我的印象是高度和宽度都在扩大，广告自然会朝着更大的中心移动，从而赋予这种飞行视觉效果。一旦我确实设法看到游戏的背景，这只是游戏屏幕的左上角部分，这让我觉得游戏已经在背景中加载了更大的区域。

以下是一个示例网址：http://dolygames.com/cube-ninja-play-free/ （注意：有一些来自不同提供商的游戏没有这个问题，所以我确实认为这可能是来自这个特定提供商的一些错误的代码，但是当我修复了具有固定宽度/高度的iframe时，一切正常）

我希望我的信息足够详细，我希望有人能够帮助我解决这个问题，这样每个人都可以享受我的游戏门户。提前感谢所有帮助的人。

广告在iframe内飞扬 - CSS错误？

0 个答案: