【问题标题】:How can you style an iframe as if it were a div? (with position:fixed)如何将 iframe 设置为 div 样式? (位置:固定)
【发布时间】:2013-02-25 09:09:34
【问题描述】:

我有一个 div 包含一堆带有相应 css 的标签,所有这些都需要移动到 iframe 中。但是,当我这样做时,iframe 版本看起来会有所不同。

我已经将应用于父页面的这些部分的 css 复制到 iframe 的样式表中。但是,在为div -> iframe 的边框设置样式时,不清楚哪些样式应该应用于iframe 的body 标记,哪些样式应该应用于父页面中的iframe 标记。

【问题讨论】:

  • 将 iframe 做大一点并在 iframe 中放置一个 div 怎么样?您是否尝试过 CSS 重置脚本?

标签: css iframe google-chrome-extension


【解决方案1】:

你只需要赋予两个元素相同的样式。

HTML

<iframe src="http://example.com" frameborder="0"></iframe>
<div></div>

注意:frameborder 属性对于 IE

CSS

iframe,div {
    width: 450px;
    height: 250px;
    border: 1px solid #ccc;
    display: block;

    padding: 0;
    margin: 10px 20px;
}

这是fiddle containing that code

【讨论】:

  • 仅将样式应用于 iframe 就足够了。我将添加一个显示:块;不过。
  • @LeBen 我写这篇文章是为了证明它们都可以以完全相同的方式设置样式。不过你是对的,iframe 默认是 inline 元素,所以 display:block;会有帮助的。
  • 谢谢!然而,事实证明,在从 jquery 创建的 div 切换到硬编码 iframe 的过程中,我做了一个跨度 &lt;span/&gt; 而不是 &lt;span&gt;&lt;/span&gt;,这就是导致问题的原因。修复之后,剩下的就很容易解决了。所以虚惊一场。
猜你喜欢
  • 2013-04-01
  • 1970-01-01
  • 1970-01-01
  • 2017-01-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多