เรารู้ว่าคุณสมบัติของแท็กที่เลือกในแต่ละเบราว์เซอร์และการสนับสนุนของแต่ละเบราว์เซอร์นั้นแตกต่างกันซึ่งทำให้กล่องเลือกเลือกแสดงแตกต่างกันในแต่ละเบราว์เซอร์ ด้านล่างนี้เราสร้างการเลือกที่เข้ากันได้อย่างสมบูรณ์ผ่านการสนับสนุนของคุณลักษณะที่ปรากฏหลัก CSS
ฉันใช้วิธีการควบคุมตัวแปรเพื่อเขียนตัวอย่างเพื่อทดสอบสามสถานการณ์ในแต่ละเบราว์เซอร์: ความสูง 100.padding.0, ความสูง. no.padding.100, noeight.no.padding ผลลัพธ์มีดังนี้: ภาพลิงก์ การปรากฏตัวของการสาธิต ของแต่ละเบราว์เซอร์
เราสามารถได้รับคุณสมบัติการวิจัยต่อไปนี้
IE6 | IE7 | IE8 | IE9 | FF | ch | SF | หน้าตา | |
ความสูงเริ่มต้น | 22px | 22px | 19px | 20px | 19px | 19px | ||
ความสูง | f | T | T | T | T | T | f | T |
การขยาย | f | f | T | T | T | T | f | T |
ความสูงของสาย | f | f | f | f | f | f | T | f |
ข้อความเป็นศูนย์กลางในแนวตั้ง | T | T | T | f | f | T | T | T |
ผ่านข้อสรุปดังกล่าวข้างต้นของคุณลักษณะผลการวิจัยเรารู้ว่า IE6 ได้รับการแก้ไขที่ 22px และไม่เปลี่ยนแปลงตลอดเวลาในขณะที่เบราว์เซอร์อื่นยกเว้น Safari รองรับแอตทริบิวต์ความสูงดังนั้นเราจึงตั้งค่าความสูง: 22px ตอนนี้ให้แก้ไขเบราว์เซอร์ Safari เราพบว่า Safari เท่านั้นที่รองรับแอตทริบิวต์ความสูงของเส้นดังนั้นคุณสามารถใช้ความสูงของสายเพื่อแก้ไขความสูงของมันเป็น 22px เมื่อขนาดฟอนต์เป็น 12px ความสูงของสาย: 22px จะถูกตั้งค่า ในท้ายที่สุดข้อความใน FF และ IE9 ไม่ได้อยู่กึ่งกลางและมีการตั้งค่า 2px 0 เราพบว่า FF และ IE9 อยู่กึ่งกลาง แต่ความสูงของการเลือกของแต่ละเบราว์เซอร์ไม่ได้เพิ่มขึ้น ดังนั้นจึงมีข้อสงสัยเล็กน้อยที่นี่ภายใต้การตั้งค่าความสูงช่องว่างของตัวเลขจำนวนน้อยไม่เพิ่มความสูงโดยรวม?
ด้านล่างเป็นตัวอย่างรหัสที่เข้ากันได้อย่างสมบูรณ์
คัดลอกรหัส