1. บทนำ
บทความนี้ประกอบด้วยวิธีแก้ปัญหาที่มีประโยชน์มาก 8 ข้อที่คุณจะใช้เมื่อประสบปัญหากับการออกแบบ CSS
2. ตัวเลือกเฉพาะเบราว์เซอร์
ตัวเลือกเหล่านี้จะมีประโยชน์มากเมื่อคุณต้องการออกแบบ CSS สำหรับเบราว์เซอร์บางตัว
IE6 และเวอร์ชันต่ำกว่า
| * html {} |
IE7 และเวอร์ชันต่ำกว่า
*:ลูกคนแรก+html {} * html {} |
*:ลูกคนแรก+html {} |
html>เนื้อหา{} |
| html>/**/เนื้อหา{} |
Opera9 และเวอร์ชันต่ำกว่า
html:ลูกคนแรก {} ซาฟารี html[xmlns*=""] body:last-child {} |
หากต้องการใช้ตัวเลือกเหล่านี้ ให้วางไว้หน้าสไตล์ ตัวอย่างเช่น
#content-box { ความกว้าง: 300px; ความสูง: 150px; - *html #content-box { ความกว้าง: 250px; } /* แทนที่สไตล์ด้านบนและเปลี่ยนความกว้างเป็น 250px ใน IE 6 และต่ำกว่า */ |
3. ให้ IE6 รองรับ PNG ความโปร่งใส
จุดบกพร่องใน IE6 ทำให้เกิดปัญหาใหญ่ เนื่องจากไม่รองรับภาพ PNG แบบโปร่งใส
คุณต้องใช้ตัวกรอง CSS
*html #สไตล์รูปภาพ { ภาพพื้นหลัง: ไม่มี; ตัวกรอง: progid: DXImageTransform.Microsoft.AlphaImageLoader (src = "fil ename.png", sizingMethod="สเกล"); - |
4. ลบเส้นประของไฮเปอร์ลิงก์ (ใช้ได้กับ FF เท่านั้น)
ใต้ FireFox เมื่อคุณคลิกไฮเปอร์ลิงก์ เส้นประจะปรากฏขึ้นที่ขอบ วิธีนี้แก้ไขได้ง่าย เพียงเพิ่มลงในสไตล์ป้ายกำกับ
| โครงร่าง:ไม่มี. { โครงร่าง: ไม่มี; - |