Html HTML5 和边框

HTML5 and frameborder

提问by JD Isaacks

I have an iframe on an HTML5 document. when I validate I am getting an error telling me that the attribute on the iframe frameBorderis obsolete and to use CSS instead.

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

I have this attribute frameBorder="0"here because it was the only way I could figure out how to get rid of the border in IE, I tried border:none;in CSS with no luck. Is there a compliant way to fix this?

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

Thanks.

谢谢。

采纳答案by Sotiris

HTML 5 doesn't support attributes such as frameborder, scrolling, marginwidth, and marginheight (which were supported in HTML 4.01). Instead, the HTML 5 specification has introduced the seamless attribute. The seamless attribute allows the inline frame to appear as though it is being rendered as part of the containing document. For example, borders and scrollbars will not appear.

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

According to MDN

根据 MDN

frameborderObsolete since HTML5

The value 1(the default) draws a border around this frame. The value 0removes the border around this frame, but you should instead use the CSS property border to control borders.

frameborder自 HTML5 起已过时

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

Like the quote above says, you shouldremove the border with CSS;
either inline (style="border: none;") or in your stylesheet (iframe { border: none; }).

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

That being said, there doesn't seem to be a single iframe provider that doesn't use frameborder="0". Even YouTube still uses the attribute and doesn't even provide a style attribute to make iframes backwards compatible for when frameborder isn't supported anymore. It's safe to say that the attribute isn't going anywhere soon. This leaves you with 3 options:

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

1. Keep using frameborder, just to be sure it works (for now)
2. Use CSS, to do the "right" thing
3. Use both. Although this doesn't resolve the incompatibility problem (just like option 1), it does and will work in every browser that has been and will be

1. 继续使用frameborder，只是为了确保它有效（现在）
2. 使用 CSS，做“正确”的事情
3. 两者都用。虽然这并不能解决不兼容问题（就像选项 1），但它确实并且将适用于已经并且将要使用的每个浏览器

As for the previous state of this decade-old answer:

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

The seamlessattribute has been supported for such a short time (or not at all by some browsers), that MDN doesn't even list it as a deprecated feature. Don't use it and don't get confused by the comments below.

该seamless属性支持的时间很短（或某些浏览器根本不支持），以至于 MDN 甚至没有将其列为不推荐使用的功能。不要使用它，也不要被下面的评论弄糊涂。

回答by csharpforevermore

As per the other posting here, the best solution is to use the CSS entry of

根据此处的其他帖子，最佳解决方案是使用的 CSS 条目

style="border:0;"

回答by Mr Lister

Since the frameborderattribute is only necessary for IE, there is another way to get around the validator. This is a lightweight way that doesn't require Javascript or any DOM manipulation.

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

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

回答by Harry Bosh

This works

这有效

iframe{
    border-width: 0px;
}

回答by Harry Alffa

How about using the same for technique for "fooling" the validator with Javascript by sticking a target attribute in XHTML <a onclick="this.target='_blank'">?

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

• onsomething= " this.frameborder = '0' "

• onsomething= " this.frameborder = '0' "

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

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

Or getElementsByTagName]("iframe")1adding this attribute for all iframes on the page?

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

Haven't tested this because I've done something which means that nothingis working in IE less than 9! :) So while I'm sorting that out ... :)

还没有对此进行测试，因为我已经做了一些事情，这意味着在 IE中没有任何东西可以工作小于 9！:) 所以当我整理出来的时候... :)

回答by sareed

I found a nice work around that will allow it to work in IE7 here. It bypasses the validator for the frameBorder attribute but keeps css for future browsers as explained in the post.

我发现了一个很好的解决办法，这将允许它工作IE7这里。它绕过了 frameBorder 属性的验证器，但为未来的浏览器保留了 css，如帖子中所述。

回答by Anton Essential

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