【问题标题】："The frameborder attribute on the iframe element is obsolete. Use CSS instead."“iframe 元素上的 frameborder 属性已过时。改用 CSS。”
【发布时间】：2014-12-04 03:03:46
【问题描述】：

我正在尝试使用 W3C 验证器验证我的网站，但它不起作用。我有一个 YouTube iframe，这是错误：

iframe 元素上的 frameborder 属性已过时。改用 CSS。

截图：

这是我的 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>

如何改正？

【问题讨论】：

这能回答你的问题吗？ HTML5 and frameborder

标签： html iframe w3c-validation

【解决方案1】：

正如他们所说的“HTML5 不支持 frameborder 属性。请改用 CSS。”

css中frameborder的等价物是border: 0px;。在 css 中将其添加到您的 iframe。

【讨论】：

根据回答 [question] (stackoverflow.com/questions/3601273/html5-and-frameborder) 您可以将 css 中的 frameborder 替换为 border: none;
此外，border: 0px 应该是 border: 0

【解决方案2】：

您的 HTML5 标记包含一个 <iframe> 元素，该元素具有以下形式的 frameborder 属性：

<iframe frameborder="0" … />

此属性不再存在于 HTML5 中。改用 CSS：

<iframe style="border:0;" … />

来源：Frameborder is obsolete

【讨论】：

两年前给出的公认答案是这样说的。
没错，但是这种写答案的方式真的很容易看出“取 X...写 Y”谢谢大家！

【解决方案3】：

这适用于您的 css

iframe{
    border-width: 0px;
}

【讨论】：

【解决方案4】：

您可以将`hidden` 用作`border-style` 或`none`：

我这样做是为了显示差异。

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>

【讨论】：

您可以将hidden 用作border-style 或none：

我这样做是为了显示差异。

您可以将`hidden` 用作`border-style` 或`none`：