IE 678ブラウザに対応するhtml 5ラベルのいくつかのスキーム

21281 ワード

httml 5

転文は明記してください---出典:ムーアhttp://www.cnblogs.com/pigtail/
html 5の大活躍の時代が到来した.ブラウザの互換性を待っている場合は、Webといくつかの街を離れていることを示します.もちろん、これはモバイルクライアントの盛んな発展のおかげです.html 5とcss 3の技術を身につけるべきかどうか悩んでいる場合は、自分の口をひどく吸って、それから、勉強しましょう.先端の春が来ているので、春だけではありません.もしあなたが信じなければ、私は「信じるか信じないか」しか言えません.
次に、標準的なhtml 5ラベル構造を見てみましょう.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>html5</title>
</head>

<body>
    <header>
        <nav></nav>
    </header>
    <article>
        <section>
            <h2></h2>
            <p></p>
        </section>
    </article>
    
    <footer></footer>
</body>
</html>

html 5ラベルの進歩は、もちろん意味化がより直感的である.もちろん、これはhtml 5の進歩の九牛の一毛にすぎず、html 5の進歩は革命的ではなく、発展的だと提案されている.私はこの説に反対しないが、ある面では確かに革命的だ.ここは問題を飛ばしたくないので、ラベルだけを話します.もちろん、このような素晴らしい意味化ラベルに興奮しているときは、IEサポートだけでなく、残念ながら、答えは否定的です.もしあなたがすでにIEに恐れられているならば、あなたはそれの果てしない苦しみに耐え続けるしかありません.(IE 9とIE 10はhtml 5とcss 3.0をサポートしています)
しかし、あなたが生活しているこの時代には天才がたくさんいます.誰かがこの問題を解決してくれた!完璧とは言えないけど!
次に、互換性IE 678がhtml 5ラベルをサポートしていないいくつかの方法を見てみましょう.
1、javascript: document.createElenment("......")
IE 678がサポートされていない一部の理由は、footerが有効なhtmlラベルであるとは思わないからです.では、それを「製造」してラベルにすればいいのではないでしょうか.最も直接的な方法はもちろんjavascriptの方式で作成します:document.createElenment("......")!

(function(){
            var element=['header','footer','article','aside','section','nav','menu','hgroup','details','dialog','figure','figcaption'],
                len=element.length;
            while(len--){
                document.createElement(element[i])
            }
 })();

これは、IE 678でラベルになるように、いくつかの典型的なhtml 5ラベルを簡単に作成するだけです.完全なjsファイルを書いた人もいますが、既存のファイルを導入する必要があります.

<!--[if lt ie 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->

書くこともあります

<!--[if lte IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
< ![endif]-->

html 5 shivとhtml 5 shimの違いは「m」と「v」だけで、他に違いはありません!もちろんこれは私が言ったことではありません.原文は…the only difference is that“one has an m and one has a v-that's it.”
ここでは特別な説明をします.IE特有の注釈判断です.
lte:Less than or equal toの略で、つまり小さいか等しいという意味です.
lt:Less thanの略、つまり小さいという意味です.
gte:Greater than or equal toの略語、つまり以上の意味です.
gt:Greater thanの略、つまりより大きいという意味です.
! : 等しくないという意味でjavascriptの不等しくない判断子と同じです
IE 9はhtml 5ラベルをサポートしていますが、サポートは完全ではありませんので、「lte」と書くこともできます.これはあなたの選択次第です.
もちろん、新しいラベルのdisplayプロパティを指定することを忘れないでください.多くの場合、ラベルがblockであることを望んでいます.

header,footer,article,aside,section,nav,menu,hgroup,details,dialog,figure,figcaption{display:block}

2、ラベルをネストする方法
はっきり言って、意味化されたhtml 5タグにdivなどの利用可能なタグをネストし、divにのみスタイルを書くという書き方には賛成しません.むしろ、ラベルに意味化されたidやclassをあげましょう.

<!--[if lt IE 9]>
<style>
body > * .section {
    color: #ff0;
}
</style>
<![endif]-->
<style>
section .section {    color: #f00;
}
</style>
<section><div class="section">    ...</div></section>

しかし、このような構造に似ている場合は、使用しても防げません.

<nav >
        <ul class="test">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </nav>

3、IE条件注記

<!--[if lt IE 9]><div class="section"><![endif]-->
<!--[if IE 9]><section class="section"><![endif]-->
<!--[if !IE]><!--><section class="section"><!--<![endif]-->
    ......
<!--[if lt IE 9]></div><![endif]-->
<!--[if IE 9]></section><![endif]-->
<!--[if !IE]><!--></section><!--<![endif]-->

IE特有のコメント判断をもう一度見てください.
lte:Less than or equal toの略で、つまり小さいか等しいという意味です.
lt:Less thanの略、つまり小さいという意味です.
gte:Greater than or equal toの略語、つまり以上の意味です.
gt:Greater thanの略、つまりより大きいという意味です.
! : 等しくないという意味でjavascriptの不等しくない判断子と同じです
みんなが知っていると信じて、これはどういうことですか!これはもっと卵が痛い方法です!大量のhtmlコードは、本来意味化したいコードをさらに混乱させている.また、スタイルの書き方にも不利です.
4、xmlnsを使ってドキュメントの命我空間を定義する
xmlnsはXHTML namespaceの略、いわゆる「ネーミングスペース」です.DOCTYPE宣言と同様にxmlnsも宣言に属する.HTMLドキュメントに依然として存在するDOCTYPE宣言とは異なり、HTMLドキュメントにはxmlnsは存在せず、私たちが普段見ているxmlnsはXHTMLドキュメントに現れています.

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

これはxhtmlの元のネーミングスペースで、html 5以降に簡略化されました.

<html lang="en">

Elco Klingenログからのアプローチは最初から広く注目されていました.このテクノロジーは、XML形式のネーミングスペースを含み、namespace接頭辞を含む要素を使用します.たとえば、次のようにします.

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/html5/">
<body>
 <html5:section>
 <!-- content -->
 </html5:section>
</body>
</html>

:html 5という接頭辞は標準的な書き方ではありません.hl 5の代わりに他の文字を使ってもいいです.プレフィックスがあると、IEは新しい要素を識別し、スタイルを適用することができる.他のブラウザで同じように有効であれば、最後に、各ブラウザで同じ要素と同じスタイルを構築することに成功します.
この方法には明らかに欠陥があります.HTMLドキュメントでXML形式のネーミングスペースを使用する必要があります.同様に、cssでもそうする必要があります.

html5\:section {
 display: block;
}

ではjsの互換性はどうでしょうか.次はテストdemlです

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/html5/">
<head>
<title>;html5</title>
<meta charset="gb2312">
<style>
    html5\:section { display: block; width:100px; height:50px; background:#f00; border: 1px solid blue; color: #ff0; }
</style>
<script>
  window.onload = function(){
     alert(document.getElementById("test").innerHTML + "---id")
     alert(document.getElementsByTagName("section")[0].innerHTML + "---TagName")
     alert(document.getElementsByTagName("SECTION")[0].innerHTML + "---  ")
  }
</script>
</head>
<body>
    <html5:section id="test">  </html5:section>
</body>
</html>

テストの結果、IE 678はすべてテストに合格しましたが、fixfoxとchromeではidしか入手できないので、この方法は同じように取るべき方法ではありません!

numpy完全攻略

vscodeでbeautifyプラグインを使用してvueファイルをフォーマットする