HTML5 和边框

Posted 2023-03-05

【中文标题】HTML5 和边框

【英文标题】：HTML5 and frameborder

【发布时间】：2011-04-05 19:15:00

【问题描述】：

我在 html5 文档上有一个 iframe。当我验证时，我收到一条错误消息，告诉我 iframe frameBorder 上的属性已过时，请改用 CSS。

我在这里有这个属性 frameBorder="0" 因为这是我能弄清楚如何摆脱 IE 中的边框的唯一方法，我在 CSS 中尝试了border:none;，但没有运气。是否有合规的方法来解决此问题？

谢谢。

【参考方案1】：

HTML 5 不支持诸如 frameborder、scrolling、marginwidth 和 marginheight 等属性（HTML 4.01 支持这些属性）。相反，HTML 5 规范引入了无缝属性。无缝属性允许内联框架看起来好像它被呈现为包含文档的一部分。例如，不会出现边框和滚动条。

According to MDN

frameborder 自 HTML5 起已过时

值1（默认值）在此框架周围绘制边框。 0 的值会移除该框架周围的边框，但您应该改用 CSS 属性边框来控制边框。

就像上面的引文所说，您应该使用 CSS 移除边框；内联 (style="border: none;") 或样式表 (iframe border: none; )。

话虽如此，似乎没有一个 iframe 提供商不使用frameborder="0"。甚至 YouTube 仍然使用该属性，甚至不提供样式属性来使 iframe 在不再支持 frameborder 时向后兼容。可以肯定地说，该属性不会很快消失。这为您提供了 3 个选项：

继续使用frameborder，以确保它可以正常工作（目前） 使用 CSS，做“正确”的事情 同时使用。虽然这并不能解决不兼容问题（就像选项 1 一样），但它确实并且将适用于所有已经和将来的浏览器

至于这个有十年历史的答案的先前状态：

seamless 属性已被支持这么短的时间（或者某些浏览器根本不支持），以至于 MDN 甚至没有将其列为已弃用的功能。不要使用它，也不要被下面的 cmets 弄糊涂。

【讨论】：

那么有没有办法在 CSS 中生成 frameBorder=0？

这真的很烦人，我使用的是最新的 Chrome，但它无法正常工作。虽然 frameborder="0" 可以。

重新审视这一点，无缝确实适用于 chrome ff 和 safari。像这样把它放在 iframe 中：

您应该使用border-width: 0px;，但恐怕这与iframes 一起使用也不兼容跨浏览器。 seamless 仍然不是所有浏览器都支持！这是您必须接受的少数 HTML5 问题之一。使用frameborder="0" 和地狱验证！

seamless 已从 HTML5 规范中删除，因此永远不会支持它。 @ForTheWatch's answer 现在是最好的。

【参考方案2】：

根据其他帖子here，最好的解决方案是使用

的CSS条目

style="border:0;"

【讨论】：

我认为他们推荐：border-width: 0px TBH。 border: none; 将不起作用。

@cnotethegr8 - 它不适用于 IE 和 Opera（当前版本），尚未在 Chrome、Safari 和/或 Firefox 中测试。我测试蹩脚的浏览器，因为如果它在它们中运行，那么它几乎肯定在其他浏览器中运行。

@SolomonClosson I test for the crappy browsers, because if it works in them, than it is almost sure to work in the others. 天哪，太天真了。如果您想确保您的应用程序在浏览器中运行，您必须在 那个 浏览器中进行测试，简单明了。没有保证，只有怪癖。

快速说明，0px 中的单位是多余的。我更喜欢保证金：0；或边框：0；因为在 CSS 方面 0px == 0em == 0% == 0。

现在 seamless 已从规范中删除，这是唯一正确的答案

【参考方案3】：

由于frameborder 属性仅对 IE 是必需的，因此还有另一种绕过验证器的方法。这是一种不需要 javascript 或任何 DOM 操作的轻量级方式。

<!--[if IE]>
   <iframe src="source" frameborder="0">?</iframe>
<![endif]-->
<!--[if !IE]>-->
   <iframe src="source" style="border:none">?</iframe>
<!-- <![endif]-->

【讨论】：

这是对所提问题的最佳回答。但是，遵守 HTML5 的目标（正在进行中，可能并且将会更改，恕不另行通知）是没有用的，尤其是当它使您使用除此类合规之外没有任何其他目的的技巧时这使代码更加复杂。如果您不想在内嵌框架周围有边框，最好继续使用frameBorder="0"。

绝对正确。只是要注意，由于 frameborder attr 纯粹是展示性的，因此无论标准发生多大变化，它返回 HTML 标准的可能性都不大。

HTML5“标​​准”中的属性是：w3.org/TR/html5/rendering.html#frames-and-framesets

@JukkaK.Korpela 等等，什么？那么为什么 OP 会收到验证错误呢？哦，对不起，您链接到的页面是关于frame 和frameset，而不是iframe。 iframe 元素上的属性 已过时；见w3.org/TR/html5/obsolete.html#attr-iframe-frameborder

发出验证错误是因为该功能被宣布为过时，这实际上并不意味着发出消息。该属性在 HTML5 中仍然定义，根据 HTML5 CR，预计浏览器会继续支持它。

【参考方案4】：

这行得通

iframe
    border-width: 0px;

【参考方案5】：

如何通过在 XHTML <a onclick="this.target='_blank'"> 中粘贴目标属性来使用 Javascript 来“欺骗”验证器的技术？

onsomething = " this.frameborder = '0' "

<iframe onload = " this.frameborder='0' " src="menu.html" id="menu"> </iframe>

或者getElementsByTagName]("iframe")1为页面上的所有iframe添加这个属性？

没有对此进行测试，因为我做了一些事情，这意味着 nothing 在小于 9 的 IE 中工作！ :) 所以在我整理的时候... :)

【参考方案6】：

我找到了一个很好的解决方法，可以让它在 IE7 here 中工作。它绕过了 frameBorder 属性的验证器，但为将来的浏览器保留了 css，如帖子中所述。

【讨论】：

使用 JavaScript 生成 iframe？它将进一步推迟 iframe 内容的加载时间，以消除 CSS 警告消息。就像接受的答案说的那样，建议改用seamless 属性。

是的，但是无缝在 IE7 中对我不起作用，因此我的帖子。

【参考方案7】：

style="border:none; scrolling:no; frameborder:0;  marginheight:0; marginwidth:0; "

【讨论】：

为了它的价值：这是无效的代码。滚动、frameborder、marginheight/width 不是 css 属性。