VML を使用するには、まず名前空間を開く必要があります。以前は動的作成が面倒でしたが、
document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml', "#default#VML"); ie8 の登場後は、 MicrosoftはIE6、IE7を一気にアップグレードした。作成方法はもっと簡単です。
document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml');
これらの機能は、HTML タグを次のように変更するのと同等です:
次に、スタイル内の対応する CSS hehavior を呼び出します。静的コードは次のようになります。
インターネット上では、IE8 が VML サポートに好意的ではなく、VML を放棄しようとしているという噂があります。その主な理由は、「vml:*」セレクターが IE8 によって違法であるとみなされていることです (これは、IE が CSS バグの修正に熱心に取り組んでいることを証明しています)。 )。その結果、関連する CSS 動作を呼び出すには、v:line、v:rect、v:roundrect、v:oval などのジョイント セレクターを使用する必要があります。ただし、CSS hehavior は正当なセレクターであれば呼び出すことができるため、ここで結合セレクターを使用するのは面倒すぎます。クラスセレクターを変更した方が適切なのでしょうか?試してみてください、問題ありません。ただし、このままではレンダリングできません。IE8 ではカーネルが書き換えられているため、このバグは hasLayout では解決できません。公式の答えは、display:inline-block を使用して、レンダリングを強制的に続行できるようにすることです。後でdisplay:blockにもこの効果があることが分かりましたが、インライン要素の問題を考えると公式パッチを使用した方が良いでしょう。この時点で、名前空間を開いて VML 要素をレンダリングするという問題は終了します。
VML 要素を動的に作成する方法を見てみましょう。これは非標準であるため、非標準の createElement メソッドを使用して作成します。 createElement のパラメータとして文字列を連結する必要があります。これには名前空間とクラス名が含まれている必要があります。
var createVML = function (tagName) {
return doc.createElement('
小さなツールを作成しました。結果を確認するには: