【问题标题】:"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>

如何改正?

【问题讨论】:

标签: html iframe w3c-validation


【解决方案1】:

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

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

【讨论】:

【解决方案2】:

您的 HTML5 标记包含一个 &lt;iframe&gt; 元素,该元素具有以下形式的 frameborder 属性:

<iframe frameborder="0" … />

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

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

来源:Frameborder is obsolete

【讨论】:

  • 两年前给出的公认答案是这样说的。
  • 没错,但是这种写答案的方式真的很容易看出“取 X...写 Y”谢谢大家!
【解决方案3】:

这适用于您的 css

iframe{
    border-width: 0px;
}

【讨论】:

    【解决方案4】:

    您可以将hidden 用作border-stylenone

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

    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>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-11-22
      • 1970-01-01
      • 2021-08-04
      • 2021-06-18
      • 1970-01-01
      • 2015-12-23
      • 1970-01-01
      • 2020-06-22
      相关资源
      最近更新 更多