1. CSS HACK
สองวิธีต่อไปนี้สามารถแก้ปัญหา HACK ได้เกือบทั้งหมดในปัจจุบัน
1. !important
ด้วยการรองรับ !important ของ IE7 ตอนนี้วิธีการ !important จึงใช้ได้เฉพาะกับ HACK ของ IE6 เท่านั้น (โปรดใส่ใจกับการเขียน โปรดจำไว้ว่าตำแหน่งการประกาศจำเป็นต้องมี ไว้ล่วงหน้า)
2. IE6/IE77 สำหรับ FireFox
*+html และ *html เป็นแท็กเฉพาะของ IE ซึ่งไม่รองรับ โดย firefox เลย และ *+html เป็นแท็กเฉพาะสำหรับ IE7
หมายเหตุ:
*+html HACK สำหรับ IE7 ต้องแน่ใจว่ามีคำสั่งต่อไปนี้ที่ด้านบนของ HTML:
http://www.w3.org/TR/html4/loose.dtd ">
2. Universal float closure
สำหรับหลักการของ clear float โปรดดูที่ [How To Clear Floats Without Structural Markup]
เพิ่มโค้ดต่อไปนี้ไปที่
Global CSS และเพิ่ม class="clearfix" ลงใน
div ที่ต้องปิด มันใช้งานได้ทุกครั้ง
.clearfix:after
{
เนื้อหา
:";
display
:block;
height
:
0
;
clear:both
;
.clearfix {จอแสดงผล:บล็อก;}
3. เคล็ดลับความเข้ากันได้อื่นๆ
1. การตั้งค่าช่องว่างภายใน FF จะทำให้ความกว้างและความสูงเพิ่มขึ้น แต่ IE จะไม่เพิ่ม (สามารถแก้ไขได้ด้วย !important)
1) จัดกึ่งกลาง
แนวตั้ง
เส้น- ความสูงถูกตั้งค่าเป็นความสูงเดียวกันกับ div ปัจจุบัน จากนั้นจัดแนวตั้ง: ตรงกลาง (ระวังอย่าให้ตัดเนื้อหา)
2) จัดกึ่งกลางในแนวนอน: 0 อัตโนมัติ (แน่นอน) ไม่มีอำนาจทุกอย่าง)
3. หากคุณต้องการเพิ่มเนื้อหาในแท็ก สำหรับสไตล์ด้านบน คุณต้องตั้งค่า display: block; (ทั่วไปในแท็กการนำทาง)
4. ความแตกต่างในความเข้าใจของ BOX ระหว่าง FF และ IE นำไปสู่ 2px ความแตกต่างและปัญหาเช่นระยะขอบของ div ที่จะลอยเป็นสองเท่าภายใต้ IE
5 แท็ก ul อยู่ใน FF มีรูปแบบรายการและช่องว่างภายในตามค่าเริ่มต้นด้านล่าง วิธีที่ดีที่สุดคือการประกาศล่วงหน้าเพื่อหลีกเลี่ยงปัญหาที่ไม่จำเป็น ( ทั่วไปในแท็กการนำทางและรายการเนื้อหา)
6. อย่าตั้งค่าความสูงของ div เป็น wrapper ภายนอก วิธีที่ดีที่สุดคือเพิ่ม overflow: ซ่อนไว้ เพื่อให้เกิดความสามารถในการปรับตัวในระดับสูง
7. เกี่ยวกับเคอร์เซอร์มือ: ตัวชี้ และมือใช้ได้กับ IE เท่านั้น
1. รูปแบบ css ส่วนใหญ่สำหรับ firefox ie6 และ ie7
ถูกแฮ็กด้วย !important ซึ่งสำหรับการทดสอบ ie6 และ firefox อาจเป็นเรื่อง
ปกติ จะทำให้เพจไม่แสดงผลตามที่ต้องการ! ฉันพบแฮ็คที่ดี
สำหรับ
IE7 โดยใช้ "*+html" ตอนนี้เรียกดูด้วย IE7 และไม่น่าจะมีปัญหาตอนนี้เขียน CSS เช่นนี้:
#1 { color: #333; }
* html #1 { color: #666; }
*+html #1 { color: #999
; สีตัวอักษรคือ #666 ภายใต้ IE6 และ #999 ภายใต้ IE7
2คำจำกัดความสไตล์หลักสำหรับ
ปัญหาการจัดกึ่งกลางในเค้าโครง CSS
มีดังนี้:body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
คำอธิบาย:
ขั้นแรกให้กำหนด TEXT-ALIGN บนพาเรนต์ องค์ประกอบ: ศูนย์กลาง ซึ่งหมายความว่าเนื้อหาภายในองค์ประกอบหลักอยู่ตรงกลาง การตั้งค่านี้เพียงพอสำหรับ IE
แต่มันไม่สามารถอยู่กึ่งกลางใน mozilla ได้ วิธีแก้ไขคือเพิ่ม "MARGIN-RIGHT: auto;MARGIN-LEFT: auto;" เมื่อตั้งค่าองค์ประกอบย่อย
ควรสังเกตว่าหากคุณต้องการใช้วิธีนี้เพื่อจัดกึ่งกลางทั้งหน้า ไม่แนะนำให้ตั้งค่า ใน DIV คุณสามารถแบ่ง div หลายรายการตามลำดับ
เพียงกำหนด MARGIN-RIGHT: auto;MARGIN-LEFT: auto ในแต่ละ div
3 การตีความรูปแบบกล่องที่แตกต่างกัน
#box{ width:600px; //for ie6.0- width:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width: 600px; // สำหรับ ff + ie6.0 width : 500px; // สำหรับ ie6.0-}
4 ระยะทางสองเท่าที่สร้างโดยการลอยตัว เช่น
#box {float: ความกว้าง: 100px; ในสถานการณ์เช่นนี้ IE จะสร้างระยะทาง 200px display:inline; //Ignore the float} มา
ดูรายละเอียดเกี่ยวกับองค์ประกอบทั้งสองและแบบอินไลน์กันดีกว่า: เริ่มต้นในบรรทัดใหม่เสมอ ความสูง , ความกว้าง, ความสูงของเส้น , ระยะขอบสามารถควบคุมได้ (องค์ประกอบบล็อก) ลักษณะขององค์ประกอบแบบอินไลน์คือ: บนบรรทัดเดียวกันกับองค์ประกอบอื่น ๆ... ไม่สามารถควบคุมได้ (องค์ประกอบแบบอินไลน์);
#box{ display:block; /สามารถเป็นองค์ประกอบแบบอินไลน์ จำลองเป็นองค์ประกอบบล็อก display:inline; //บรรลุผลของการจัดเรียงใน diplay แถวเดียวกัน:ตาราง;
IE ไม่รู้จักคำจำกัดความของ min- แต่จริงๆ แล้วถือว่าความกว้างและความสูงปกติ มีขั้นต่ำ นี่เป็นปัญหาใหญ่ หากคุณใช้เพียง width และ height
ค่าทั้งสองนี้จะไม่เปลี่ยนแปลงในเบราว์เซอร์ปกติ หากคุณใช้เพียง min-width และ min-height ความกว้างและความสูงจะไม่ถูกตั้งค่าเลย ภายใต้ IE
เช่น หากคุณต้องการตั้งค่าภาพพื้นหลัง ความกว้างนี้จะมีความสำคัญมากกว่า เพื่อแก้ปัญหานี้ คุณสามารถทำได้:
#box{ width:
80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px;
ความกว้างขั้นต่ำของหน้า
ความกว้างขั้นต่ำเป็นคำสั่ง CSS ที่สะดวกมาก ซึ่งสามารถระบุได้ว่าความกว้างขั้นต่ำขององค์ประกอบต้องไม่ต่ำกว่าความกว้างที่กำหนด เพื่อให้แน่ใจว่าเค้าโครงนั้นถูกต้องเสมอ แต่ IE ไม่รู้จักสิ่งนี้
และจริงๆ แล้วถือว่าความกว้างเป็นความกว้างขั้นต่ำ เพื่อให้คำสั่งนี้ใช้งานได้บน IE คุณสามารถใส่
จากนั้นออกแบบ CSS ดังนี้:
#container{ min-width: 600px; :expression (document.body.clientWidth < 600? "600px": "auto" );}
ความกว้างขั้นต่ำแรกเป็นเรื่องปกติ แต่ความกว้างในบรรทัดที่ 2 ใช้ Javascript ซึ่ง IE เท่านั้นที่รู้จัก ซึ่งจะทำให้คุณเช่นกัน เอกสาร HTML ไม่เป็นทางการมากนัก จริงๆ แล้วใช้ความกว้างขั้นต่ำผ่านการตัดสิน Javascript
นอกจากนี้ยังสามารถเขียนได้โดยตรงเป็น:
#คอนเทนเนอร์{ ความกว้างขั้นต่ำ:600px;
ด้วยวิธีนี้ ความกว้างขั้นต่ำคือ 600PX โดยไม่คำนึงถึง IE หรือ FF
7 ล้าง .hackbox
{ display:table; //Display the object as a block element-level table} หรือ .hackbox{ clear:both;}
หรือเพิ่ม : after ( วัตถุหลอก) ตั้งค่าเนื้อหาที่เกิดขึ้นหลังจากวัตถุ ซึ่งมักจะใช้ร่วมกับเนื้อหา IE ไม่รองรับวัตถุหลอกนี้ และเบราว์เซอร์ Ie ไม่รองรับ
ดังนั้นจึงไม่มีผลกับเบราว์เซอร์ IE/WIN สิ่งที่ลำบากที่สุดเกี่ยวกับเรื่องนี้... #box:after{ content: "."; display: block; height: 0; clear:both
;
ด้านข้างของจุดบกพร่อง
ลอยอยู่ และตำแหน่งด้านขวาใช้ระยะขอบด้านซ้ายของแพทช์ด้านนอก ข้อความในวัตถุด้านขวาจะอยู่ห่างจากด้านซ้าย 3px
#box{ float:left:800px;}# left{ float:left; width:50 %;}#right{ width:50%;}*html #left{ margin-right:-3px; //ประโยคนี้คือคีย์}
รหัส HTML
9 ตัวเลือกแอตทริบิวต์ (ไม่สามารถถือว่าเข้ากันได้ แต่เป็นข้อบกพร่องในการซ่อน css)
p[id ]{}div[id]{}
ใช้สำหรับ IE6.0 และเวอร์ชันที่ต่ำกว่า IE6.0
ยังคงมีความแตกต่างระหว่างตัวเลือกแอตทริบิวต์และตัวเลือกย่อยใน FF และ OPera แม้ว่าขอบเขตของตัวเลือกแอตทริบิวต์จะค่อนข้างใหญ่ เช่น p ใน [id] แท็ก p ทั้งหมดที่มีรหัสจะมีลักษณะเหมือนกัน
10 ปัญหาการซ่อนหาของ IE
เมื่อแอปพลิเคชัน div ซับซ้อน ก็จะมีลิงก์บางส่วน ในแต่ละคอลัมน์ เช่น DIV ในเวลานี้ปัญหาการซ่อนหาเกิดขึ้นได้ง่าย
ไม่สามารถแสดงเนื้อหาบางส่วนได้ เมื่อเมาส์เลือกบริเวณนี้ จะพบว่าเนื้อหานั้นอยู่ในหน้านั้นจริงๆ
วิธีแก้ไข: ใช้แอตทริบิวต์ line-height สำหรับ #layout หรือใช้ความสูงและความกว้างคงที่สำหรับ #layout รักษาโครงสร้างหน้าให้เรียบง่ายที่สุด
11 การปรับความสูงไม่ได้
การปรับความสูงไม่ได้หมายความว่าความสูงของชั้นนอกไม่สามารถปรับได้โดยอัตโนมัติเมื่อความสูงของวัตถุชั้นในเปลี่ยนแปลง โดยเฉพาะอย่างยิ่งเมื่อวัตถุชั้นในใช้
ระยะขอบหรือเบาะ
ตัวอย่าง:
เนื้อหาในวัตถุ p
CSS: #box {พื้นหลังสี:#eee; }
#box p {margin-top: 20px;margin - ด้านล่าง: 20px; text-align:center; }
วิธีแก้ไข: เพิ่มวัตถุ div ว่าง 2 อันด้านบนและด้านล่างโค้ด P: .1{height:0px;overflow:hidden;} หรือเพิ่มแอตทริบิวต์เส้นขอบให้กับ DIV
วิธีต่อไปนี้เป็นวิธีการวิเคราะห์จากอีกมุมหนึ่ง:
วิธีการจัดการ BUG ของเบราว์เซอร์รวบรวม (บางส่วน) สำหรับเพื่อน ๆ ที่ชอบการออกแบบเว็บเพื่อแบ่งปัน:
1. เครื่องหมายดอกจัน*
IE สามารถจดจำ * ได้ แต่เบราว์เซอร์มาตรฐาน เช่น FF ไม่สามารถจดจำ * ได้
ตัวอย่าง: p { color:yellow; *color:red;}
พวกที่คล้ายกันคือ
+ เครื่องหมายบวก
มีเพียง IE เท่านั้นที่อธิบาย
p{สี:แดง; +สี:น้ำเงิน}
IE จะแสดงเป็นสีน้ำเงิน และ FF จะแสดงเป็นสีแดง
2.!สำคัญ
IE6 และต่ำกว่าจะเพิกเฉยต่อสไตล์นี้ IE7 FF จะรองรับ
p{สี:แดง !สำคัญ;สี:เหลือง;}
IE7 FF จะแสดงสีแดง IE6 สีเหลือง
โปรดทราบว่าวิธีการ !important จะถูกละเว้นโดย IE6 และต่ำกว่าเท่านั้น หลังจากทำตามรูปแบบข้างต้นแล้ว สามารถใช้วิธีอื่นในการเพิ่มน้ำหนักสไตล์ได้ในระดับสากล
3. ขีดเส้นใต้.
เวอร์ชัน IE6 และต่ำกว่าจะใช้สไตล์นี้ ส่วนเวอร์ชันอื่นๆ จะถูกละเว้น
p{สี:สีแดง; _สี:สีน้ำเงิน}
4. หมายเหตุ:
p{สี:สีแดง};
สไตล์นี้สามารถนำไปใช้และแสดงใน IE6 ได้ แต่จะไม่ได้รับการประมวลผลใน IE5 และเวอร์ชันที่ต่ำกว่า ดังนั้นจึงสามารถแยกแยะความแตกต่างได้สำหรับ IE5/6
5. @นำเข้า:
ใช้ URL ใน @IMPORT เพื่อนำเข้าสไตล์ การใช้งานมาตรฐานคือการใส่ค่าใน URL ในเครื่องหมายคำพูดดังต่อไปนี้ @IMPORT URL("newstyle.css"); การใช้งานนี้สามารถรองรับโดยเบราว์เซอร์ IE5 ขึ้นไปและ FF ดังนั้น บรรลุ รูปแบบของ IE4 จะถูกประมวลผลแยกกัน
นอกจากนี้ยังมีวิธีอื่น:
@หน้าจอนำเข้า URL("noie.css");
หน้าจอเป็นตัวเลือกที่ใช้ในการระบุประเภทอุปกรณ์ หน้าจอใช้สำหรับการแสดงผลบนหน้าจอ และใช้การพิมพ์สำหรับการแสดงผลอุปกรณ์การพิมพ์ อย่างไรก็ตาม IE ไม่รองรับวิธีนี้ และเบราว์เซอร์ IE ทั้งหมดสามารถแยกความแตกต่างระหว่าง IE และ FF ได้
6. ตัวเลือกแอตทริบิวต์: ใช้เพื่อเลือกวัตถุที่มีคุณสมบัติเฉพาะ
ช่วง[class=left]{color:blue}
ช่วง[ชื่อ]{สี:สีแดง;}
IE6 ไม่รองรับ แต่ทำงานได้ดีใน FF ดังนั้น IE และ FF จึงสามารถประมวลผลแยกกันได้
ในการพัฒนาจริง IE และ FF มักจะต้องได้รับการประมวลผลแยกกัน คุณสามารถใช้โค้ดต่อไปนี้:
#เนื้อหา{
สี:สีแดง;
-
[xmlnx] #เนื้อหา{
สี:สีฟ้า
-
ฉันคิดว่าวิธีนี้ใช้ได้จริงและใช้บ่อยมาก ฉันแนะนำให้เพื่อน ๆ ทราบ หากคุณต้องการคำอธิบายเพิ่มเติมฉันสามารถโพสต์อีกครั้งได้
7. ตัวเลือกวัตถุย่อย:
ช่วง>p{สี:สีแดง}
ไม่รองรับ IE6 และยังสามารถใช้เพื่อแยก IE และ FF ได้ด้วย
8. วิธีตันเต็ก
#เนื้อหา{
สี:สีฟ้า;
ตระกูลเสียง:""}"";
ตระกูลเสียง: สืบทอด;
สี:สีแดง;
-
หลังจากใช้กลุ่มเสียงในโค้ดด้านบนแล้ว สีต่อไปนี้:แดง จะไม่ถูกแยกวิเคราะห์โดยเบราว์เซอร์ IE5.5 และต่ำกว่า ดังนั้น สีข้อความจะปรากฏเป็นสีแดงบน IE6/7/FF และบน IE5.5 และต่ำกว่านั้น จะปรากฏเป็นสีน้ำเงินบนเบราว์เซอร์
นอกจากนี้ยังมีวิธีอื่นในการจัดการกับตระกูลเสียง:
#เนื้อหา{
สี:สีแดง;
ตระกูลเสียง:"}"
ตระกูลเสียง: สืบทอด;
สี:สีฟ้า;
-
เมื่อใช้วิธีนี้ ข้อความในเบราว์เซอร์ IE6 และด้านล่างและเบราว์เซอร์ FF จะปรากฏเป็นสีแดง ในขณะที่ข้อความใน IE5 และด้านล่างเบราว์เซอร์จะปรากฏเป็นสีน้ำเงิน!
9. คุณลักษณะการหลบหนี
p{width:200px;}
IE5.5 และต่ำกว่าจะถูกละเว้น หมายเหตุ: อักขระแบ็กสแลชไม่สามารถปรากฏก่อน 0-9 หรือตัวอักษร af
10. ความคิดเห็นแบบมีเงื่อนไขใน IE 1. รู้เบื้องต้นเกี่ยวกับความคิดเห็นแบบมีเงื่อนไข
ความคิดเห็นแบบมีเงื่อนไขใน IE มีความสามารถที่ดีเยี่ยมในการแยกแยะเวอร์ชันของ IE จาก IE และที่ไม่ใช่ IE และมักใช้ในการออกแบบเว็บ
วิธีการแฮ็ก
ความคิดเห็นแบบมีเงื่อนไขสามารถใช้ได้ใน IE5 ขึ้นไปเท่านั้น
หากคุณติดตั้ง IE หลายรายการ ความคิดเห็นแบบมีเงื่อนไขจะขึ้นอยู่กับ IE เวอร์ชันสูงสุด
โครงสร้างพื้นฐานของความคิดเห็นแบบมีเงื่อนไขจะเหมือนกับความคิดเห็น HTML () ดังนั้นเบราว์เซอร์อื่นที่ไม่ใช่ IE จะถือว่าเป็นความคิดเห็นธรรมดาและไม่สนใจความคิดเห็นเหล่านั้นโดยสิ้นเชิง
IE จะใช้เงื่อนไข if เพื่อพิจารณาว่าจะแยกวิเคราะห์เนื้อหาในความคิดเห็นแบบมีเงื่อนไขเหมือนเนื้อหาของหน้าปกติหรือไม่
2. คุณลักษณะคำอธิบายประกอบแบบมีเงื่อนไข
gt: มากกว่า เลือกเวอร์ชันที่มีเงื่อนไขหรือสูงกว่า ไม่รวมเวอร์ชันที่มีเงื่อนไข
lt: น้อยกว่า เลือกเวอร์ชันด้านล่างเวอร์ชันแบบมีเงื่อนไข ไม่รวมเวอร์ชันแบบมีเงื่อนไข
gte: มากกว่าหรือเท่ากับ เลือกเวอร์ชันที่มีเงื่อนไขหรือสูงกว่า รวมถึงเวอร์ชันที่มีเงื่อนไขด้วย
lte: น้อยกว่าหรือเท่ากับ เลือกเวอร์ชันด้านล่างเวอร์ชันแบบมีเงื่อนไข รวมถึงเวอร์ชันแบบมีเงื่อนไขด้วย
! : เลือกทุกเวอร์ชัน ยกเว้นเวอร์ชันที่มีเงื่อนไข ไม่ว่าจะสูงหรือต่ำ วิธีใช้ความคิดเห็นแบบมีเงื่อนไข
โปรดสังเกตการแทนที่ <> ในโค้ดด้วยเครื่องหมายที่มากกว่าหรือน้อยกว่าที่สอดคล้องกันในภาษาอังกฤษ
คุณไม่ได้ใช้ Internet Explorer
คุณกำลังใช้ Internet Explorer เวอร์ชัน 6 หรือเบราว์เซอร์ที่ไม่ใช่ IE