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) ?

Skrip ini akan menyemak penyemak imbas klien, dan jika ia adalah IE, kemudian gantikan semua dengan versi yang diubah suai (terbenam ). Ambil perhatian bahawa kita mesti menggunakan ungkapan biasa dan atribut innerHTML dan bukannya kaedah DOM standard, kerana IE tidak boleh mendapatkan atribut

Bergaya

Akhir sekali, lihat CSS yang digunakan pada halaman ini. Cukup mudah:

abbr, akronim, span.abbr {

kursor: bantuan;
sempadan-bawah: 1px putus-putus #000;
}
Mozilla dan Opera menggunakan pemilih atribut abbr dan akronim, IE menggunakan Use akronim dan span.abbr. Walau apa pun, kedua-dua dan digayakan - dengan kursor tetikus tanda tanya (apabila tetikus berakhir) dan garis bawah putus-putus.

Lain-lain

1. Terima kasih kepada Michael Kusyn kerana menyediakan penyelesaian JavaScript.

2. Untuk mendapatkan maklumat lanjut tentang , dan perbezaan antara keduanya, rujuk HTML Craig Saila bukan akronim... (Evolt.org)

Selamat datang untuk bertukar pendapat dan komen, anda boleh menghantar e-mel ke

marek@sovavsiti.cz.