หน้าแรก>การสอนการออกแบบเว็บไซต์>การทำให้เว็บเป็นมาตรฐาน

เพิ่มสไตล์ให้กับแท็ก abbr ใน IE

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-05-31 00:31:34

การแนะนำ

<abbr> ใช้เพื่อเพิ่มแท็ก XHTML ที่มีป้ายกำกับอย่างเหมาะสมให้กับตัวย่อบนหน้าเว็บ (หมายเหตุผู้แปล: ในที่นี้ ตัวย่อและตัวย่อจะพิจารณาแยกกัน ช่วงตัวย่อมีขนาดใหญ่กว่าตัวย่อ ให้ใช้แท็ก <ตัวย่อ> สำหรับชื่อย่อ ตัวย่อ) เบราว์เซอร์ IE สำหรับ Windows ยังไม่รองรับแท็ก <abbr> ใน IE คุณสามารถใช้ CSS กับ <acronym> ได้ แต่ใช้กับแท็ก <abbr> ไม่ได้ IE จะแสดงข้อความแจ้งสำหรับแอตทริบิวต์ title ของแท็ก <acronym> แต่ไม่ต้องสนใจแท็ก <abbr>

ข้อบกพร่อง (หรือฟีเจอร์) ของ IE นี้ทำให้ผู้คนในเว็บไซต์บางคนคิดว่าแท็ก <abbr> ไม่มีประโยชน์เลย และนี่เป็นสิ่งที่ผิดอย่างเห็นได้ชัด แท็กนี้ยังคงได้รับการจัดการอย่างถูกต้องใน Mozilla และ Opera และมีความสำคัญมากสำหรับการอ่านและความหมายของเนื้อหาเว็บ นั่นเป็นเหตุผลที่ฉันมองหาวิธีแก้ปัญหาอยู่เรื่อยๆ และในที่สุดฉันก็พบมัน

สารละลาย

วิธีการนี้มีพื้นฐานมาจากข้อเท็จจริงง่ายๆ: แม้ว่า IE จะเพิกเฉยต่อแท็ก <abbr> แต่แท็กอื่นๆ ที่ซ้อนอยู่ภายในแท็ก <abbr> ก็ยังคงเป็นเรื่องปกติ ดังนั้นฉันจึงฝังแท็ก <span> ไว้ภายใน <abbr> ตั้งชื่อและแอตทริบิวต์คลาสเป็น <span> จากนั้น <abbr> ก็เริ่มเหมือนกับแท็ก <acronym>

ตัวอย่างรหัส

ดูโค้ดด้านล่าง ตัวอย่างคำย่อง่ายๆ:

<abbr title="Cascading Style Sheets">CSS</abbr>

ตอนนี้เปรียบเทียบโค้ดที่แก้ไขแล้ว:

<abbr title="สไตล์ชีตแบบเรียงซ้อน"><span class="abbr" title="สไตล์ชีตแบบเรียงซ้อน">CSS</span></abbr>

การทำงานอัตโนมัติ

การฝัง <span> ลงในแท็ก <abbr> ทุกแท็กด้วยตนเองนั้นเป็นไปไม่ได้อย่างเห็นได้ชัด - ทั้งน่าเบื่อและไม่จำเป็นสำหรับ Mozilla และ Opera โชคดีที่ขณะนี้มีวิธีแก้ไขปัญหาเฉพาะหน้าที่ใช้สคริปต์ฝั่งไคลเอ็นต์โดยอัตโนมัติ

คุณอาจสังเกตเห็นว่าคำย่อในหน้านี้ (หมายเหตุนักแปล: หน้าของผู้เขียนต้นฉบับ) ได้รับแจ้งแม้ใน IE และรูปแบบ CSS (ขีดเส้นใต้เส้นประและเคอร์เซอร์เมาส์รูปเครื่องหมายคำถาม) จะถูกเพิ่มเข้าไป อย่างไรก็ตาม หากคุณดูซอร์สโค้ด คุณจะไม่พบแท็ก <span> ที่กล่าวถึงข้างต้น สามารถทำได้ด้วย JavaScript ง่าย ๆ ที่โหลดหน้านี้:

ฟังก์ชั่น styleAbbr() {
var oldBodyText, newBodyText, reg
ถ้า (isIE) {
oldBodyText = document.body.innerHTML;
reg = /<ABBR([^>]*)>([^<]*)</ABBR>/g;
newBodyText = oldBodyText.replace(reg, '<ABBR $1><SPAN class="abbr" $1>$2</SPAN></ABBR>');
document.body.innerHTML = newBodyText;
-
-
window.onload = ฟังก์ชั่น () {
สไตล์Abbr()
-
isIE = (document.all) ? จริง:เท็จ;

สคริปต์นี้จะตรวจสอบเบราว์เซอร์ไคลเอ็นต์ และหากเป็น IE ให้แทนที่แท็ก <abbr> ทั้งหมดด้วยเวอร์ชันที่แก้ไข (ฝัง <span>) โปรดทราบว่าเราต้องใช้นิพจน์ทั่วไปและแอตทริบิวต์ innerHTML แทนวิธี DOM มาตรฐาน เนื่องจาก IE ไม่สามารถรับแอตทริบิวต์ <abbr> ผ่าน DOM ได้

จัดแต่งทรงผม

ดู CSS ที่ใช้ในหน้านี้ครั้งสุดท้าย ค่อนข้างง่าย:

abbr, ตัวย่อ, span.abbr {
เคอร์เซอร์: ช่วยด้วย;
ขอบล่าง: 1px ประ #000;
-

Mozilla และ Opera ใช้ตัวเลือกแอตทริบิวต์ abbr และตัวย่อ ส่วน IE ใช้ตัวย่อและ span.abbr ไม่ว่า <abbr> และ <ตัวย่อ> จะมีลักษณะอย่างไร โดยมีเคอร์เซอร์เมาส์เครื่องหมายคำถาม (เมื่อวางเมาส์ไว้) และขีดเส้นใต้เส้นประ

บทความที่เกี่ยวข้อง