WinIE で abbr 要素にスタイルを適用させる

旧来 WinIE での abbr 要素

かつて WinIE 5/6 では、 abbr 要素にスタイルを適用させたり、 title 属性によるポップアップ表示をさせたりすることが出来ませんでした。
現在は Windows でも Microsoft Edge, Google chrome や Firefox 等 (これらを用いた派生ブラウザ含む) が主流であり、現状役立つ内容ではありません。「史料」的位置付けとして残しておく次第です。

PC Tips の記事より

解決方法

XML 文書として認識させる

HTML ではなく XML として認識させることで、 abbr 要素へのスタイル指定などが可能になります。

本文書において、 HTML や XML の部分にマーク附けされた abbr 要素が WinIE でも有効になっていることを確認してみてください。

推測

MSIE では、 HTML で使われる要素が XML の中で使われた際、それらは「HTML の要素」として認識されず、デフォルトのスタイルや情報などを持たない単なる一要素として認識されます。この方法は、その現象を逆手に取ったものです。
これを応用すれば、 html 要素にスタイルを適用させたり、 body 要素に枠線を附けたりすることが可能になります。
未知の要素へのスタイルは適用出来ることから、 WinIE では、 abbr 要素は「未知の要素」ではなく、「情報を附加出来ない既知の要素」として認識されているのではないかと思われます。

DHTML を使う

JavaScript の innerHTML クラスを用いて、 abbr 要素の要素名を acronym に書き換えてしまう方法もあります。「ごく簡単なHTMLの説明」などで用いられている方法はこれです。

以下に、実際の JavaScript の記述を紹介致します。

var abbrElements,abbrPart,m;
abbrElements = document.getElementsByTagName("abbr");
while(m = abbrElements.length){
 abbrPart = abbrElements.item(m-1).parentNode;
 abbrPart.innerHTML = abbrPart.innerHTML.replace(/(<\/?)abbr/ig,'$1acronym');
}

ただし、 HTML Living Standard では、略語を明示する手段としての acronym 要素は廃止となり、 abbr 要素一つに絞られることとなりました。