【问题标题】:Apply margins to all but iframe将边距应用于除 iframe 之外的所有内容
【发布时间】:2010-09-24 05:24:59
【问题描述】:

我有一个使用“css a”的“页面 a”。此页面在 css 中设置了边距。 我还有一个使用“css b”的“page b”。此页面还设置了 css 中的边距,与“css a”(10px)中的大小相同。

有什么办法可以让我在单独查看“页面 a”时有边距,但是在“页面 b”上的 iframe 中查看时,边距不适用于“页面 a” .我知道这是一个很长的问题,但基本问题是我正在为 iframe 中的内容获得“双倍边距”:来自“页面 a”的边距,然后是来自“页面 b”的边距!

我想一种方法是设置 iframe 不受“页面 a”边距的影响。有什么方法可以设置“css a”从边距中排除 iframe,这样只有 css b 的边距会应用,页面仍然对齐。这可能吗?

感谢您的帮助

马特

【问题讨论】:

  • 您能否提供示例代码(一个测试用例)供我们查看和修改?谢谢。

标签: css iframe


【解决方案1】:

阅读了your clarification,我认为您不能仅使用 CSS 来做到这一点。我很确定 CSS 不能跨帧。

不过,如果两个文档位于同一个域中,您应该可以使用 JavaScript 来执行此操作。

例如,这应该适用于您的示例页面。将以下属性添加到<iframe>

 onload="window.frames[0].document.body.style.margin = 0"

至少在 Firefox 3 和 Opera 9 中有效。但它绝对是老式的 JavaScript,而且考虑到我的浏览器在哪些变体中工作时有点变化无常,我不确定将它应用到真实网站有多么容易。

比我更精通 JavaScript 的人应该能够提供帮助。

这可能会有所帮助:

【讨论】:

    【解决方案2】:

    我真的很抱歉,我知道每个人都对发布答案而不是 cmets 感到非常不安,因为我是新来的堆栈溢出和学习。怜悯!我已经弄清楚我做错了什么,现在我有了这个“开放 ID”的东西,我会尝试在正确的地方发布。恐怕这一次我必须发布作为答案,因为我在没有公开身份的情况下开始这个问题,所以仍然无法评论那些东西......

    好的,现在这是一个“测试用例”:http://cart3.jaspers-sensations.com/test/pagea.html

    页面b是:http://cart3.jaspers-sensations.com/test/pageb.html css a 是:http://cart3.jaspers-sensations.com/test/stylea.css css b 是:http://cart3.jaspers-sensations.com/test/styleb.css

    【讨论】:

    • ps aol 横幅广告并不是一种廉价的广告尝试。我只是将它作为另一个 iframe 的示例粘贴在那里。
    • 不确定这是否是“评论”的正确位置,但 InsDel 我尝试了 iframe#head 并且它也没有工作:(
    • 我真的不明白你的测试用例有什么问题。您能解释一下出了什么问题以及您的期望吗?谢谢。
    • "PAGE WITH IFRAME (PAGE A)" 文本从页面边缘略微缩进,您可能会注意到。这是由于页面 css 中设置的边距为 10%。在 iframe 中,iframe 的边缘和“蓝色框”之间也有一个边距,这个边距在 css b 中设置。我想删除这个边距...
    • ... 在 iframe 中时,但在单独查看页面(页面 b)时保留边距,而不是在 iframe 中。谢谢
    【解决方案3】:

    我不知道从 a.css 中指定它的方法,但是如果您将以下内容添加到 b.css:

    iframe { margin:-10px; }
    

    ...它可能会起作用。

    编辑:带有 a.html 的 iframe 是 b.html 中包含的唯一项目吗?
    你有测试文件吗?

    EDIT(2):在 css 中,您可以将其指定为

    iframe#head { ...; }
    

    另外,我认为您可以对自己问题的回答发表评论。我可以用mine

    【讨论】:

      【解决方案4】:

      如果页面在 iframe 内,您可以使用 Javascript 更改边距。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2010-10-15
        • 2020-11-23
        • 1970-01-01
        • 1970-01-01
        • 2010-10-09
        • 1970-01-01
        • 1970-01-01
        • 2019-12-29
        相关资源
        最近更新 更多