Html “iframe 元素上的 frameborder 属性已过时。请改用 CSS。”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26274082/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
"The frameborder attribute on the iframe element is obsolete. Use CSS instead."
提问by Kevin Masson DunkDesign
I'm trying to validate my website with the W3C validator but it doesn't work. I have a YouTube iframe and this is the error:
我正在尝试使用 W3C 验证器验证我的网站，但它不起作用。我有一个 YouTube iframe，这是错误：
The frameborder attribute on the iframe element is obsolete. Use CSS instead.
iframe 元素上的 frameborder 属性已过时。改用 CSS。
Screenshot: http://i.stack.imgur.com/VCiJV.png
截图：http: //i.stack.imgur.com/VCiJV.png
And this is my index.html (cropped):
这是我的 index.html（裁剪）：
<!-- Video -->
<div class="video-container box-size">
<iframe width="700" height="312" src="http://www.youtube.com/embed/OfUPsnAtZMI" frameborder="0" allowfullscreen></iframe>
</div>
How can I correct it?
我该如何纠正？
回答by user2950291
As they state themselves "The frameborder attribute is not supported in HTML5. Use CSS instead."
正如他们自己所说的那样“HTML5 不支持 frameborder 属性。请改用 CSS。”
The equivalent of frameborder in css is border: 0px;. Add it to your iframe in css.
css 中 frameborder 的等价物是border: 0px;. 在 css 中将它添加到您的 iframe。
回答by Harry Bosh
This works in your css
这适用于您的 css
iframe{
border-width: 0px;
}
回答by Abhishek Agarwal
Your HTML5 markup contains an <iframe>element with a frameborder attribute in the form:
您的 HTML5 标记<iframe>在表单中包含一个具有 frameborder 属性的元素：
<iframe frameborder="0" … />
This attribute is no longer present in HTML5. Use CSS instead:
此属性不再存在于 HTML5 中。改用 CSS：
<iframe style="border:0;" … />
Source: Frameborder is obsolete
回答by Justin Liu
You can use hiddenas border-styleor none:
您可以使用hiddenasborder-style或none：
I made this to show the difference.
我这样做是为了显示差异。
const button = document.getElementById("submit");
const hidden = document.getElementById("hidden");
const none = document.getElementById("none");
const solid = document.getElementById("solid");
const iframe = document.getElementById("iframe");
const error = document.getElementById("error")
button.addEventListener("click", function() {
if (hidden.checked) {
iframe.style.borderStyle = "hidden";
} else if (none.checked) {
iframe.style.borderStyle = "none";
} else if (solid.checked) {
iframe.style.borderStyle = "solid";
} else {
error.textContent = "Choose the border then click Apply";
setTimeout(function(){ error.textContent = "" },1000);
}
});#iframe {
border-style:solid;
}
#error {
color:red;
font-size:larger;
}<div align="center">
<iframe id="iframe" allowfullscreen="allowfullscreen"></iframe>
<br />
<input type="radio" name="mode" id="hidden"><label for="hidden">Hidden border</label>
<input type="radio" name="mode" id="none"><label for="none">No border</label>
<input type="radio" name="mode" id="solid"><label for="solid">Solid border</label>
<br />
<button id="submit">Apply</button>
<div id="error">
</div>
</div>