2008/01/27

IE7でHTMLに存在しない要素にスタイルシートを適用する方法


AjaxianとHTML5.JPでIE7以降で、HTML5の新要素にスタイルシートを適用する方法が紹介されていました。

ですが、この方法はどんな要素にも適用できるようです。

例えば、以下のようなHTMLがあったとします。

<html>
<head>
<style>
dummy { color:red; font-size:2em;}
</style>
</head>
<body>
<dummy>ここは&lt;dummy&gt;要素です。</dummy>
</body>
</html>

このHTMLは、IE7では以下のように表示されます。

IE7表示結果

FireFox2.0だとこうなります。

FireFox表示結果

Opera9.24だとこうなります。

Opera表示結果

 

IE7だけスタイルシートが適用されていませんね。

このHTMLにJavaScriptを追加します(赤字部分)。

<html>
<head>
<style>
dummy { color:red; font-size:2em;}
</style>
<script>
document.createElement("dummy");
</script>
</head>
<body>
<dummy>ここは&lt;dummy&gt;要素です。</dummy>
</body>
</html>

これをIE7で表示してみると、正しくスタイルシートが適用されていることが分かります。

IE7表示結果

 

たった1つ命令を追加するだけですし、これは便利ですね。

 

(2008.1.28追記)

Multiple IE環境での確認ですが、IE5.01はこの方法はうまくいきませんでしたが、IE5.5,IE6では有効でした。今のIEのシェア状況を考えると、IE全般に適用できると考えてもよさそうですね。

 


スポンサーリンク


このエントリーをはてなブックマークに追加




Twitter ではブログにはない、いろんな情報を発信しています。


コメント

コメントを書く



プロフィール

  • 名前:fnya
    経歴:
    SE としての経験は15年以上。様々な言語と環境で業務系システム開発を行い、セキュリティ対策などもしていました。現在は趣味SE。

    Twitter では、ブログでは取り上げない情報も公開しています。


    ブログについて

    このブログは、IT、スマートフォン、タブレット、システム開発などに関するさまざまな話題を取り上げたり、雑感などをつづっています。


    >>ブログ詳細
    >>自作ツール
    >>運営サイト
    >>Windows 10 まとめ

    Twitter のフォローはこちらから Facebook ページはこちら Google+ページはこちら RSSフィードのご登録はこちらから