มีประโยชน์มากมายในการใช้เฟรมเวิร์ก XHTML+CSS แต่จริงๆ แล้วมีปัญหาอยู่บ้าง ไม่ว่าจะเกิดจากการขาดประสบการณ์หรือการคิดที่ไม่ชัดเจน อันดับแรกฉันจะเขียนปัญหาบางอย่างที่ฉันพบด้านล่างเพื่อช่วยทุกคนจากการค้นหา
1. การตีความโมเดล BOX ใน Mozilla Firefox และ IE ไม่สอดคล้องกัน ส่งผลให้มีความแตกต่างกัน 2px วิธีแก้ไข:
div{margin:30px!important;margin:28px;}
โปรดทราบว่าลำดับของระยะขอบทั้งสองนี้จะต้องไม่เขียนแบบย้อนกลับ ตามข้อมูลของ Ajie! IE ไม่รู้จักคุณลักษณะที่สำคัญ แต่เบราว์เซอร์อื่นสามารถทำได้ ดังนั้น จริงๆ แล้วมันถูกตีความแบบนี้ภายใต้ IE:
หากมีการกำหนดdiv{maring:30px;margin:28px}
ซ้ำๆ กัน ไฟล์สุดท้ายจะถูกดำเนินการ ดังนั้นคุณจึงไม่สามารถเขียนแค่ Margin:XXpx!important
; IE5 และ IE6 ไม่สอดคล้องกันภายใต้ IE5 div{width:300px;margin:0 10px 0 10px;} ความกว้างของ div จะถูกตีความว่าเป็น 300px-10px (ช่องว่างภายในด้านขวา) -10px (ความกว้างสุดท้ายของ div คือ 280px ในขณะที่ความกว้างบน IE6 และเบราว์เซอร์อื่นๆ คำนวณเป็น 300px + 10px (การเติมด้านขวา) + 10px (การเติมด้านซ้าย) = 320px ในขณะนี้ เราสามารถทำการแก้ไขดังต่อไปนี้:
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
ฉันไม่ค่อยเข้าใจว่าสิ่งนี้ /**/ คืออะไร ฉันแค่รู้เท่านั้น รองรับ IE5 และ firefox ทั้งคู่ แต่ IE6 ไม่รองรับ ถ้าใครเข้าใจกรุณาแจ้งให้เราทราบด้วย ขอบคุณ! :)
3. แท็ก ul มีค่า padding ตามค่าเริ่มต้นใน Mozilla แต่ใน IE มีเพียง Margin เท่านั้นที่มีค่า ดังนั้นให้กำหนดไว้ก่อน:
ul{margin:0;padding:0;}
สามารถแก้ปัญหาส่วนใหญ่ได้
4. เกี่ยวกับสคริปต์ คุณลักษณะภาษาไม่รองรับใน xhtml1.1 คุณเพียงแค่ต้องเปลี่ยนรหัสเป็น:
เท่านั้นเอง
5. หากคุณตั้งค่าทิศทางของ float และการจัดตำแหน่งข้อความในคอนเทนเนอร์ BOX ให้เหมือนกัน:
{float:left;text-align:left;margin:0 0 0 200px;}
เราสามารถทำการแก้ไขต่อไปนี้:
{float :left; text-align:left;margin:0 0 0 200px;display:inline;}