禁用/隐藏 iframe 滚动条？答案

【问题标题】：Disabling/Hiding iframe Scroll bar?禁用/隐藏 iframe 滚动条？
【发布时间】：2020-01-22 06:02:42
【问题描述】：

我有一个 HTML 代码用于嵌入我的 (laut.fm) 广播电台（广播播放器）。现在的问题是当将代码输入新的wordpress站点时，有一个丑陋的框架和一个丑陋的滚动条。该代码适用于 iframe。

<figure><iframe width="1350" height="120" src="//laut.fm/widgets/player_for/radio-am-bad-2?player%5Bstations%5D=radio-am-bad-2&amp;player%5Bcolor%5D%5Bcolor%5D=white&amp;player%5Bshadow%5D=false&amp;player%5Bdisplay%5D%5Bborder%5D%5Bradius%5D=60px&amp;player%5Bcolor%5D%5Bbackground_to%5D=%23ff00ff&amp;player%5Bcolor%5D%5Bbackground_from%5D=%2300ff84&amp;player%5Bborder%5D%5Bcolor%5D=%23cccccc&amp;player%5Bborder%5D%5Bwidth%5D=0px&amp;player%5Bbutton%5D%5Bcolor%5D%5Bbackground_to%5D=%23000000&amp;player%5Bbutton%5D%5Bcolor%5D%5Bbackground_from%5D=%23000000&amp;player%5Bbutton%5D%5Bborder%5D%5Bcolor%5D=%23333333&amp;player%5Bbutton%5D%5Bborder%5D%5Bw[enter image description here][1]idth%5D=2px"></iframe></figure>

【问题讨论】：

这是一张图片：i.stack.imgur.com/6qbNG.jpg 在我的网站上查看问题：www.radio-am-bad.de
我如何禁用滚动条和丑陋的框架？

标签： html wordpress iframe radio audio-player

【解决方案1】：

有很多方法。

在 iframe 标签中添加scrolling="no" 和style="border:0;"

&lt;figure&gt;&lt;iframe width="1350" height="120" scrolling="no" style="border:0;" src="//laut.fm/widgets/player_for/radio-am-bad-2?player%5Bstations%5D=radio-am-bad-2&amp;amp;player%5Bcolor%5D%5Bcolor%5D=white&amp;amp;player%5Bshadow%5D=false&amp;amp;player%5Bdisplay%5D%5Bborder%5D%5Bradius%5D=60px&amp;amp;player%5Bcolor%5D%5Bbackground_to%5D=%23ff00ff&amp;amp;player%5Bcolor%5D%5Bbackground_from%5D=%2300ff84&amp;amp;player%5Bborder%5D%5Bcolor%5D=%23cccccc&amp;amp;player%5Bborder%5D%5Bwidth%5D=0px&amp;amp;player%5Bbutton%5D%5Bcolor%5D%5Bbackground_to%5D=%23000000&amp;amp;player%5Bbutton%5D%5Bcolor%5D%5Bbackground_from%5D=%23000000&amp;amp;player%5Bbutton%5D%5Bborder%5D%5Bcolor%5D=%23333333&amp;amp;player%5Bbutton%5D%5Bborder%5D%5Bw[enter image description here][1]idth%5D=2px"&gt;&lt;/iframe&gt;&lt;/figure&gt;

【讨论】：

height:auto 在 iframe 上是无稽之谈。它只会为 iframe 提供 150 像素的高度，与不提供 height 属性相同。这 150px 是固定的，与内容的高度无关。
@Peter 是正确的，但可以花半天时间从各个可能的角度使事情变得完美，或者只是让它发挥作用。我有很短的空闲时间只是为了让它为 OP 工作，但是是的，他可以通过删除 height 来达到同样的效果。
我想说的是，没有height: auto 这样的东西。该属性值不存在。您不能使用 CSS 自动调整 iframe 的大小。
猜我在想height:initial; - 已修复。

【解决方案2】：

要移除边框，可以在样式代码中添加style="border:none"。

要移除滚动条，最好只增加 iframe 的高度，使其适合内容。作为替代方案，您可以将 scrolling="no" 添加到 html 元素，这不是有效的 HTML。目前大多数浏览器都支持它，但将来可能会改变。

<figure><iframe width="1350" height="125" style="border:none" src="//laut.fm/widgets/player_for/radio-am-bad-2?player%5Bstations%5D=radio-am-bad-2&amp;player%5Bcolor%5D%5Bcolor%5D=white&amp;player%5Bshadow%5D=false&amp;player%5Bdisplay%5D%5Bborder%5D%5Bradius%5D=60px&amp;player%5Bcolor%5D%5Bbackground_to%5D=%23ff00ff&amp;player%5Bcolor%5D%5Bbackground_from%5D=%2300ff84&amp;player%5Bborder%5D%5Bcolor%5D=%23cccccc&amp;player%5Bborder%5D%5Bwidth%5D=0px&amp;player%5Bbutton%5D%5Bcolor%5D%5Bbackground_to%5D=%23000000&amp;player%5Bbutton%5D%5Bcolor%5D%5Bbackground_from%5D=%23000000&amp;player%5Bbutton%5D%5Bborder%5D%5Bcolor%5D=%23333333&amp;player%5Bbutton%5D%5Bborder%5D%5Bw[enter image description here][1]idth%5D=2px"></iframe></figure>
<!--                increased height ^^^         ^^^^^^^^^^^ style code to remove border -->

但我测试了你的代码，120 似乎就足够了。您发布的屏幕截图（带有滚动条）使用 height="116" 代替。

【讨论】：