Tambahkan style_CSS/HTML pada teg abbr dalam IE

Pengarang: JunChen 24-05-2005 9:56:57
Teks asal: http://www.sovavsiti.cz/css/abbr.html
Terjemahan: JunChen

Hak Cipta: Penterjemah JunChen Sila hubungi penterjemah untuk mencetak semula.
Pengenalan

digunakan untuk menambah singkatan yang sesuai pada halaman web (Nota Penterjemah: Di sini, singkatan dan singkatan dianggap secara berasingan. Skop singkatan lebih besar daripada singkatan. Gunakan teg untuk huruf pertama singkatan). Teg XHTML yang ditanda, penyemak imbas Windows IE tidak menyokong teg Dalam IE, anda boleh menggunakan CSS pada tetapi tidak pada teg

Pepijat (atau ciri) IE ini membuatkan sesetengah kakitangan tapak web berfikir bahawa teg tidak berguna sama sekali, dan ini jelas salah. Teg ini masih dikendalikan dengan betul dalam Mozilla dan Opera, dan ia sangat penting untuk kebolehbacaan dan semantik kandungan web. Itulah sebabnya saya terus mencari penyelesaian, dan akhirnya saya menemuinya.

Penyelesaian

Kaedah ini berdasarkan fakta mudah: walaupun IE mengabaikan teg Jadi saya membenamkan teg di dalam , tetapkan tajuk dan atribut kelas , dan kemudian

Contoh kod

Lihat kod di bawah, yang merupakan contoh ringkas bagi singkatan:

CSS
Sekarang, bandingkan kod yang diubah suai:

CSS
Tindakan automatik

Membenamkan secara manual ke dalam setiap teg jelas mustahil - membosankan dan tidak perlu untuk Mozilla dan Opera. Nasib baik, kini terdapat penyelesaian automatik berasaskan skrip pihak pelanggan.

Anda mungkin perasan bahawa perkataan yang disingkatkan pada halaman ini (Nota Penterjemah: halaman pengarang asal) digesa walaupun dalam IE, dan gaya CSS ditambah (garis bawah bertitik dan kursor tetikus berbentuk tanda soal). Walau bagaimanapun, jika anda melihat kod sumber, anda tidak akan menemui teg Ini adalah terima kasih kepada JavaScript mudah yang memuatkan halaman ini:

gaya fungsiAbbr() {
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) ?