javascript - iFrame overflow-x BUG 在 Chrome、IE、Opera、Safari 但在 Firefox 上没有

Question

我必须在 iFrame 中加载远程 URL。远程内容将比 iFrame 宽一点。我不希望显示水平滚动条，但如果需要则显示垂直滚动条。

我尝试了以下代码:

<iframe scrolling="auto" style="width:500px; height:300px; border:0; padding:0; margin:0; overflow-x:hidden; overflow-y:auto;" src="http://digg.com"></iframe> 

它适用于 Firefox，但不适用于 IE、Chrome、Opera...这可能是一个错误或其他问题。 fiddle : http://jsfiddle.net/DpbUy/3/

---

我还尝试了标记为在 here 中接受的答案中提供的 iFrame 的标签 horizo​​ntalscrolling 和 horizo​​ntalscrolling , 但也不走运。

<iframe scrolling="yes" horizontalscrolling="no" verticalscrolling="yes" style="width:500px; height:300px; border:0; padding:0; margin:0;" src="http://digg.com"></iframe> 

Th 在任何浏览器中都不起作用。

fiddle : http://jsfiddle.net/85q4r/

---

我知道我可以删除 iFrame 的滚动条并将其高度设置为 4000px 或其他内容，然后将其放入带有 overflow-x:hidden; 的 div 中； overflow-y:auto;，但我想要一种更简洁的方式。

---

我想知道我是否应该放弃这个并尝试另一种方法。谁能告诉我是否可以这样做？

Answer 1

要从 iframe 中删除水平滚动条，请对其应用此 css 规则:

iframe{
    overflow-x:hidden
}

您不需要将它应用于 iframe 内容。