web-dev-qa-db-ja.com

HTML5とフレームボーダー

HTML5ドキュメントにiframeがあります。検証すると、iframe frameBorderの属性が廃止され、代わりにCSSを使用することを伝えるエラーが表示されます。

私はこの属性を持っていますframeBorder="0"ここがIEでボーダーを取り除く方法を見つけることができる唯一の方法だったので、私は運のないCSSでborder:none;を試しました。これを修正する準拠した方法はありますか？

ありがとう。

cssinternet-explorerhtml5
70
JD Isaacks

HTML 5は、frameborder、scrolling、marginwidth、marginheightなどの属性をサポートしていません（これらはHTML 4.01でサポートされていました）。代わりに、HTML 5仕様ではシームレス属性が導入されています。シームレス属性を使用すると、インラインフレームを、含まれているドキュメントの一部としてレンダリングされているかのように表示できます。たとえば、境界線とスクロールバーは表示されません。

MDNによる

frameborderHTML5以降廃止

値1（デフォルト）は、このフレームの周囲に境界線を描画します。値0はこのフレームの周囲の境界線を削除しますが、代わりにCSSプロパティborderを使用して境界線を制御する必要があります。

上記の引用が言うように、shouldCSSで境界線を削除します。
インライン（style="border: none;"）またはスタイルシート（iframe { border: none; }）のいずれか。

そうは言っても、frameborder="0"を使用しない単一のiframeプロバイダーは存在しないようです。 YouTubeでさえ属性を使用し、frameborderがサポートされなくなった場合のiframeの下位互換性を確保するためのスタイル属性も提供していません。属性がすぐにどこにも行かないと言っても安全です。これにより、次の3つのオプションが得られます。

  1. frameborderを使用し続けて、動作することを確認してください（今のところ）
  2. CSSを使用して「正しい」ことを行う
  3. 両方を使う。これは非互換性の問題を解決するものではありませんが（オプション1のように）、これまでのすべてのブラウザーで機能し、機能します。


この10年前の答えの以前の状態に関しては：

seamless属性は非常に短い期間（または一部のブラウザではまったくサポートされていない）サポートされているため、MDNは非推奨機能としてリストしていません。使用しないでください。また、以下のコメントで混乱しないでください。

40
Sotiris

他の投稿 here によると、最善の解決策は、次のCSSエントリを使用することです

style="border:0;"
46
csharpforevermore

frameBorder属性はIEにのみ必要なので、バリデーターを回避する別の方法があります。これは、JavaScriptやDOM操作を必要としない軽量な方法です。

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

これは動作します

iframe{
    border-width: 0px;
}
6
Harry Bosh

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がIE 9未満！ :)だから私はそれを整理している間... :)

2
Harry Alffa

IE7 here で動作するようにする素晴らしい回避策を見つけました。 frameBorder属性のバリデーターをバイパスしますが、投稿で説明されているように、将来のブラウザーのためにcssを保持します。

0
sareed