เคล็ดลับทั่วไปเกี่ยวกับความเข้ากันได้ของ CSS
โปรดลองเขียนโค้ดในรูปแบบ xhtml และ DOCTYPE จะส่งผลต่อการประมวลผล CSS ตามมาตรฐาน W3C จะต้องเพิ่มคำสั่ง DOCTYPE
1.ปัญหาการจัดกึ่งกลางแนวตั้งของ div
Vertical-align:middle; เพิ่มระยะห่างบรรทัดให้มีความสูงเท่ากับ DIV line-height:200px ทั้งหมด จากนั้นแทรกข้อความและข้อความจะอยู่ตรงกลางในแนวตั้ง ข้อเสียคือคุณต้องควบคุมเนื้อหาและไม่ตัดเป็นบรรทัดอื่น
2. ปัญหาการเพิ่มมาร์จิ้นเป็นสองเท่า
ระยะขอบที่ตั้งไว้สำหรับชุด div ให้ลอยจะเพิ่มขึ้นสองเท่าภายใต้ IE นี่เป็นข้อผิดพลาดที่มีอยู่ใน ie6 วิธีแก้ไขคือเพิ่ม display:inline; ภายใน div นี้
ตัวอย่างเช่น:
<#div id=”imfloat”>
CSS ที่เกี่ยวข้องคือ #imfloat{
ลอย:ซ้าย;
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 คุณสามารถใส่
#container{ ความกว้างขั้นต่ำ: 600px; width:exPRession(document.body.clientWidth < 600? "600px": "auto" );}
ความกว้างขั้นต่ำอันแรกเป็นเรื่องปกติ แต่ความกว้างในบรรทัดที่สองใช้จาวาสคริปต์ ซึ่ง IE เท่านั้นที่รู้จัก ซึ่งจะทำให้เอกสาร HTML ของคุณเป็นทางการน้อยลงด้วย จริงๆ แล้วใช้ความกว้างขั้นต่ำผ่านการตัดสิน Javascript
6. ข้อความ IE แบบลอยตัวของ DIV ทำให้เกิดข้อผิดพลาด 3 พิกเซล
วัตถุทางด้านซ้ายลอยอยู่ และตำแหน่งทางขวาโดยใช้ระยะขอบด้านซ้ายของแพทช์ด้านนอก ข้อความภายในวัตถุทางด้านขวาจะเว้นระยะห่าง 3px จากด้านซ้าย
#box {ลอย: ซ้าย; ความกว้าง: 800px;}
#left{ ลอย:ซ้าย; ความกว้าง:50%;}
#ขวา{ ความกว้าง:50%;}
*html #left{ margin-right:-3px; //ประโยคนี้คือกุญแจสำคัญ}
เมื่อแอปพลิเคชัน div ซับซ้อน จะมีลิงก์บางส่วนในแต่ละคอลัมน์ และปัญหาการซ่อนหาอาจเกิดขึ้นได้ง่ายใน DIV
ไม่สามารถแสดงเนื้อหาบางส่วนได้ เมื่อเมาส์เลือกบริเวณนี้ จะพบว่าเนื้อหานั้นอยู่ในหน้านั้นจริงๆ วิธีแก้ไข: ใช้แอตทริบิวต์ line-height สำหรับ #layout หรือใช้ความสูงและความกว้างคงที่สำหรับ #layout รักษาโครงสร้างหน้าให้เรียบง่ายที่สุด
8. div ลอยปิด ความสูงแบบปรับได้ชัดเจน
①ตัวอย่าง: <#div id="floatA" ><#div id="floatB" ><#div id="NOTfloatC" >NOTfloatC ที่นี่ไม่ต้องการแปลต่อ แต่ต้องการจัดเรียงด้านล่าง (คุณสมบัติของ floatA และ floatB ได้รับการตั้งค่าเป็น float:left;)
รหัสนี้ทำงานได้ดีใน IE ปัญหาอยู่ที่ FF เหตุผลก็คือ NOTfloatC ไม่ใช่ป้ายกำกับ float และต้องปิดป้ายกำกับ float เพิ่ม <#div class="clear"> ระหว่าง <#div class="floatB"> <#div class="NOTfloatC"> div นี้จะต้องใส่ใจกับตำแหน่งของมัน และจะต้องเหมือนกับ div สองตัวด้วย คุณลักษณะ float ไม่สามารถมีความสัมพันธ์แบบซ้อนระหว่างระดับได้ มิฉะนั้นจะเกิดข้อยกเว้น และกำหนดรูปแบบที่ชัดเจนดังนี้ .clear{ clear:both;}
② อย่าตั้งค่าความสูงของ div เป็น wrapper ภายนอก เพื่อให้ปรับความสูงได้โดยอัตโนมัติ ให้เพิ่ม overflow:hidden ใน wrapper เมื่อมี float box การปรับความสูงอัตโนมัติจะไม่ถูกต้องภายใต้ IE เวลา IE ควรถูกทริกเกอร์ แอตทริบิวต์ส่วนตัวของเลย์เอาต์ (IE ที่ชั่วร้าย!) สามารถทำได้โดยใช้การซูม: 1; จึงบรรลุความเข้ากันได้
ตัวอย่างเช่น wrapper ถูกกำหนดไว้ดังนี้:
.colwrapper{ ล้น: ซ่อน; ซูม: 1; ระยะขอบ: 5px อัตโนมัติ;}
สำหรับการเรียงพิมพ์ คำอธิบาย CSS ที่เราใช้บ่อยที่สุดน่าจะเป็น float:left บางครั้งเราจำเป็นต้องสร้างพื้นหลังแบบรวมไว้ด้านหลัง float div ในคอลัมน์ n เช่น:
ตัวอย่างเช่น เราต้องการตั้งค่าพื้นหลังของหน้าเป็นสีน้ำเงินเพื่อให้สีพื้นหลังของทั้งสามคอลัมน์เป็นสีน้ำเงิน อย่างไรก็ตาม เราจะพบว่าเมื่อกึ่งกลางด้านซ้ายเหยียดลง หน้าเว็บก็จะยังคงมีความสูงเท่าเดิม สาเหตุก็คือเพจไม่ใช่แอตทริบิวต์ float และเพจของเราไม่สามารถตั้งค่าให้ลอยได้เนื่องจากจำเป็นต้องอยู่ตรงกลาง ดังนั้นเราจึงควรแก้แบบนี้
วิธีแก้ไขคือการฝัง DIV ด้านซ้ายที่มีความกว้าง 100%
④ตัวปิดลูกลอยอเนกประสงค์ (สำคัญมาก!)
สำหรับหลักการของ clear float โปรดดูที่ [วิธีการล้างโฟลตโดยไม่มีมาร์กอัปโครงสร้าง] เพิ่มโค้ดต่อไปนี้ลงใน Global CSS และเพิ่ม class="clearfix" ลงใน div ที่ต้องปิด ซึ่งใช้งานได้ทุกครั้ง
/* ล้างการแก้ไข */
.clearfix:after { เนื้อหา:"; display:block; height:0; clear:both;
.clearfix { จอแสดงผล: อินไลน์บล็อก }
/* ซ่อนจาก IE Mac */
.clearfix {จอแสดงผล:บล็อก;}
/* สิ้นสุดการซ่อนจาก IE Mac */
/* สิ้นสุด clearfix */
หรือตั้งค่าดังนี้: .hackbox{ display:table; //Display the object as a block element-level table}
9. ไม่สามารถปรับความสูงได้
ความสูงที่ไม่สามารถปรับได้หมายความว่าความสูงภายนอกจะไม่สามารถปรับได้โดยอัตโนมัติเมื่อความสูงของวัตถุภายในเปลี่ยนแปลง โดยเฉพาะอย่างยิ่งเมื่อวัตถุภายในใช้ระยะขอบหรือช่องว่างภายใน
ตัวอย่าง:
#box {สีพื้นหลัง:#eee;
#box p {ระยะขอบบน: 20px;
เนื้อหาในวัตถุ p
วิธีแก้ไข: เพิ่มวัตถุ div ว่างสองตัวด้านบนและด้านล่างของวัตถุ P โค้ด CSS: .1{height:0px;overflow:hidden;} หรือเพิ่มแอตทริบิวต์เส้นขอบให้กับ DIV
10.เหตุใดจึงมีช่องว่างใต้ภาพภายใต้ IE6?
มีเทคนิคมากมายในการแก้ไขข้อบกพร่องนี้ คุณสามารถเปลี่ยนเค้าโครงของ html หรือตั้งค่า img ให้แสดง:บล็อก หรือตั้งค่าแอตทริบิวต์การจัดแนวแนวตั้งเป็นแนวตั้ง:ด้านบน
ข้อความกลางล่าง-ล่างสามารถแก้ไขได้ทั้งหมด
11. วิธีจัดตำแหน่งข้อความให้ตรงกับช่องป้อนข้อความ
เพิ่มแนวตั้ง: กลาง;