ความเข้ากันได้ของ CSS กับเบราว์เซอร์บางครั้งทำให้ผู้คนปวดหัว บางทีเมื่อคุณเข้าใจเทคนิคและหลักการแล้วมันก็ไม่ใช่เรื่องยาก ฉันได้รวบรวมเคล็ดลับความเข้ากันได้สำหรับ IE7, 6 และ Fireofx จากอินเทอร์เน็ตและจัดเรียงออก สำหรับการเปลี่ยนไปใช้ web2.0 โปรดลองเขียนโค้ดในรูปแบบ xhtml และ DOCTYPE จะส่งผลต่อการประมวลผล CSS ตามมาตรฐาน W3C จะต้องเพิ่มคำสั่ง DOCTYPE
เคล็ดลับ CSS
1.ปัญหาการจัดกึ่งกลางแนวตั้งของ div
Vertical-align:middle; เพิ่มระยะห่างบรรทัดให้มีความสูงเท่ากับ DIV line-height:200px ทั้งหมด จากนั้นแทรกข้อความและข้อความจะอยู่ตรงกลางในแนวตั้ง ข้อเสียคือคุณต้องควบคุมเนื้อหาและไม่ตัดเป็นบรรทัดอื่น
2. ปัญหาการเพิ่มมาร์จิ้นเป็นสองเท่า
ระยะขอบที่ตั้งไว้สำหรับชุด div ให้ลอยจะเพิ่มขึ้นสองเท่าภายใต้ IE นี่เป็นข้อผิดพลาดที่มีอยู่ใน ie6 วิธีแก้ไขคือเพิ่ม display:inline; ภายใน div นี้
ตัวอย่างเช่น:
<#div id=”imfloat”>
CSS ที่สอดคล้องกันคือ
#ลอยตัว{
ลอย:ซ้าย;
Margin:5px;/*ภายใต้ IE จะเข้าใจว่าเป็น 10px*/
display:inline;/*ภายใต้ IE จะเข้าใจว่าเป็น 5px*/}
3. ระยะทางสองเท่าที่เกิดจากการลอยตัว เช่น
#box{ float:left; width:100px; margin:0 0 0 100px; // ในกรณีนี้ IE จะสร้างระยะทาง 200px display:inline;
เรามาพูดถึงรายละเอียดเกี่ยวกับบล็อกองค์ประกอบทั้งสองและแบบอินไลน์กัน: คุณลักษณะขององค์ประกอบบล็อกคือองค์ประกอบนั้นจะเริ่มต้นด้วยบรรทัดใหม่เสมอ และสามารถควบคุมความสูง ความกว้าง ความสูงของเส้น และระยะขอบได้ (องค์ประกอบบล็อก) ขององค์ประกอบอินไลน์คือสิ่งนั้น และองค์ประกอบอื่นๆ อยู่ในบรรทัดเดียวกันและไม่สามารถควบคุมได้ (องค์ประกอบอินไลน์)
#box{ display:block; //คุณสามารถจำลององค์ประกอบแบบอินไลน์เป็นองค์ประกอบบล็อก display:inline; //บรรลุผลของการจัดเรียงในไดเพลย์แถวเดียวกัน:ตาราง;
4 ปัญหา IE เกี่ยวกับความกว้างและความสูง
IE ไม่รู้จักคำจำกัดความของ min- แต่ในความเป็นจริงแล้ว IE ถือว่าความกว้างและความสูงปกติเหมือนกับว่ามี min- นี่เป็นปัญหาใหญ่ หากคุณใช้เพียง width และ height ค่าทั้งสองนี้จะไม่เปลี่ยนแปลงในเบราว์เซอร์ปกติ หากคุณใช้เพียง min-width และ min-height ความกว้างและความสูงจะไม่ถูกตั้งค่าเลย ภายใต้ IE
เช่น หากคุณต้องการตั้งค่าภาพพื้นหลัง ความกว้างนี้จะมีความสำคัญมากกว่า เพื่อแก้ไขปัญหานี้ คุณสามารถทำได้:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px;
5. ความกว้างขั้นต่ำของหน้า
min-width เป็นคำสั่ง CSS ที่สะดวกมาก ซึ่งสามารถระบุได้ว่าความกว้างขั้นต่ำขององค์ประกอบต้องไม่เล็กกว่าความกว้างที่กำหนด เพื่อให้เลย์เอาต์ถูกต้องเสมอ แต่ IE ไม่รู้จักสิ่งนี้ และจริงๆ แล้วถือว่าความกว้างเป็นความกว้างขั้นต่ำ เพื่อให้คำสั่งนี้พร้อมใช้งานบน IE คุณสามารถใส่ <div> ใต้แท็ก <body> จากนั้นระบุคลาสสำหรับ div จากนั้นออกแบบ CSS ดังนี้:
#container{ ความกว้างขั้นต่ำ: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
ความกว้างขั้นต่ำอันแรกเป็นเรื่องปกติ แต่ความกว้างในบรรทัดที่สองใช้ Javascript ซึ่ง IE เท่านั้นที่รู้จัก ซึ่งจะทำให้เอกสาร HTML ของคุณเป็นทางการน้อยลงด้วย จริงๆ แล้วใช้ความกว้างขั้นต่ำผ่านการตัดสิน Javascript