html - 关于 iframe 和水平滚动的另一个问题

Question

在我的 React 应用程序中，我使用的是 iframe，其内容由服务器提供。没有在样式中添加任何关于 overflow 的内容，我只在 Chrome 中看到了水平滚动条(没有可拖动的滚动条，只有滚动条)，而在 FireFox 和 Edge 等其他浏览器中没有。

添加overflow-x: hidden; I frame样式的wrapper div是这样的

.article-container {
  display: flex;
  flex-direction: column;
  flex: auto;
  iframe {
    flex: auto;
    overflow-x: hidden;
  }
  iframe.body {
    overflow-x: hidden;
  }
}

从 CSS 文件添加 overflow-x: hidden; nighter 或作为内联样式添加到 iframe 都不起作用，仍然可以看到滚动条(在 chrome 中) 我知道 iframe 的内容不可从外部操作，以防万一我添加了 iframe.body

所以我的问题是，为什么只能在 Chrome 中看到它，有没有办法隐藏 X 轴滚动？ 与Flex和方向有关吗？

My main question is why it only happens in Chrome, and what is the difference in render or browser engine that makes such a difference. wrapping the iframe in a div with a lesser height is not an answer, it is a hack

Answer 1

可以在iframe标签中加入scrolling="no"

<iframe src="your path" scrolling="no"></iframe>