IEのabbrタグにstyle_CSS/HTMLを追加

著者: JunChen 2005-5-24 9:56:57
原文: http://www.sovavsiti.cz/css/abbr.html
翻訳: JunChen

著作権: 翻訳者 JunChen 転載については翻訳者にご連絡ください。
はじめに

は、Web ページに適切な略語を追加するために使用されます (翻訳者注: ここでは、略語と略語は別々に考慮されます。略語の範囲は略語よりも広いです。

の最初の文字には タグを使用します)マークされた XHTML タグ。Windows IE ブラウザは現在、 タグをサポートしていません。 IE では、 タグには CSS を適用できますが、 タグの title 属性にはヒントが表示されます。

この IE のバグ (または機能) により、一部の Web サイト スタッフは タグがまったく役に立たないと考えていますが、これは明らかに間違っています。このタグは Mozilla と Opera で引き続き正しく処理され、Web コンテンツの読みやすさとセマンティクスにとって非常に重要です。だからこそ私は解決策を探し続け、ついにそれを見つけました。

解決策

この方法は、IE が タグを無視しても、 タグ内にネストされている他のタグは正常であるという単純な事実に基づいています。そこで、 内に タグを埋め込み、 の title 属性と class 属性を設定すると、 は タグと同じになりました。

コード例

以下のコードを見てください。これは略語の簡単な例です。

CSS

次に、変更されたコードを比較します。

CSS

自動アクション

すべての タグに を手動で埋め込むのは明らかに不可能です。Mozilla と Opera にとっては退屈であり、不必要です。幸いなことに、現在はクライアント側のスクリプトベースの自動化された回避策があります。

このページ (翻訳者注: オリジナルの作成者のページ) の省略された単語は IE でもプロンプトが表示され、CSS スタイルが追加されていることに気づいたかもしれません (点線の下線と疑問符の形のマウス カーソル)。ただし、ソース コードを見ると、上記の タグは見つかりません。これは、このページをロードする単純な JavaScript のおかげです:

function styleAbbr() {
var oldBodyText, newBodyText, reg
if (isIE) {
oldBodyText = document.body.innerHTML;
reg = / ]*)>([^<]*)/g;
newBodyText = oldBodyText.replace(reg, ' $2');
document.body.innerHTML = newBodyText;
}
}
window.onload = function(){
styleAbbr()

};

isIE = (document.all) ? true:false;

このスクリプトはクライアントのブラウザをチェックし、IE の場合はすべての タグを変更されたバージョン (埋め込まれた ) に置き換えます。 IE は DOM を通じて 属性を取得できないため、標準の DOM メソッドの代わりに正規表現と innerHTML 属性を使用する必要があることに注意してください。

様式化された

最後に、このページで使用されている CSS を見てみましょう。とてもシンプルです:

abbr、頭字語、span.abbr {
カーソル: ヘルプ;
ボーダーボトム: 1px 破線 #000;
}

Mozilla と Opera は abbr および頭字語属性セレクターを使用し、IE は Use を使用します頭字語とspan.abbr。いずれにせよ、 と は両方とも、疑問符のマウス カーソル (マウスが置かれている場合) と破線の下線でスタイル設定されます。

その他

1. JavaScript ソリューションを提供してくれた Michael Kusyn に感謝します。

2. 、 タグとその 2 つの違いの詳細については、「Craig Saila の HTML は頭字語ではありません...」(Evolt.org) を参照してください。

意見やコメントの交換を歓迎します。電子メールは marek@sovavsiti.cz に送信できます。