ตัวอย่าง
การแบ่งส่วนหน้าในกล่อง
| #กล่อง { หน้าแบ่งภายใน: หลีกเลี่ยง; - |
คำอธิบาย
คุณสมบัตินี้กำหนดว่าเพจจะเกิดขึ้นภายในองค์ประกอบที่ระบุหรือไม่
สถานะการสนับสนุน
| IE6 หมายเลข IE7หมายเลข IE8 ใช่ |
N.
ตัวอย่าง
คุณสมบัติเค้าร่าง
| #กล่อง { โครงร่าง: ทึบ 1px สีแดง; - |
โครงร่าง
คำอธิบาย
เป็นตัวย่อสำหรับสไตล์โครงร่าง ความกว้างโครงร่าง และสีโครงร่าง แอ็ตทริบิวต์นี้ดีกว่าแอ็ตทริบิวต์ border เนื่องจากไม่ส่งผลต่อการไหลของเอกสาร ดังนั้นจึงมีประโยชน์มากกว่าสำหรับการดีบักปัญหาโครงร่าง
สถานะการสนับสนุน
| IE6 หมายเลข IE7หมายเลข IE8 ใช่ |
O.
ตัวอย่าง
ของค่าทางเลือกสำหรับแอตทริบิวต์การแสดงผล
| #กล่อง { จอแสดงผล: อินไลน์บล็อก; - |
คำอธิบาย
โดยปกติแล้วแอตทริบิวต์การแสดงผลจะถูกตั้งค่าเป็นบล็อก อินไลน์ หรือไม่มีเลย ค่าทางเลือก ได้แก่:
| อินไลน์บล็อก ตารางอินไลน์ รายการสินค้า วิ่งเข้า โต๊ะ คำบรรยายตาราง ตารางเซลล์ ตาราง-คอลัมน์ ตารางคอลัมน์กลุ่ม ส่วนท้ายตาราง-กลุ่ม กลุ่มส่วนหัวของตาราง ตารางแถว ตารางแถวกลุ่ม |
สถานะการสนับสนุน
| IE6 หมายเลข IE7หมายเลข IE8 ใช่ |
การจัดการ
ตัวอย่าง
พื้นที่สีขาวที่ยุบได้
| พี { white-space: พรีไลน์; - div { พื้นที่สีขาว: ก่อนห่อ; - |
การ
ตั้งค่าบรรทัดล่วงหน้าของแอตทริบิวต์ช่องว่างจะยุบองค์ประกอบช่องว่างหลายรายการให้เป็นช่องว่างเดียวในขณะที่อนุญาตให้มีการขึ้นบรรทัดใหม่อย่างชัดเจน ค่า pre-wrap ของแอตทริบิวต์ white-space จะไม่ยุบช่องว่างหลายช่องให้เป็นช่องเดียว แต่อนุญาตให้ตั้งค่าการขึ้นบรรทัดใหม่ได้อย่างชัดเจน
สถานะการสนับสนุน
| IE6 หมายเลข IE7หมายเลข IE8 ใช่ |
4. เทคโนโลยีอื่นๆ มากมาย
A.ตัวอย่าง
ประเภทสื่อของ @import
| @import url("styles.css") หน้าจอ; |
คำอธิบาย:
เช่นเดียวกับตัวอย่างข้างต้น ประเภทสื่อของไฟล์สไตล์ชีตที่นำเข้าจะถูกประกาศหลังที่อยู่ไฟล์ ในตัวอย่างนี้ ประเภทสื่อสิ่งพิมพ์คือ "หน้าจอ"
สถานะการสนับสนุน
| IE6 หมายเลข IE7หมายเลข IE8 ใช่ |
จุดบกพร่องแม้ว่า
IE6 และ IE7 จะรองรับ @import แต่ก็ไม่มีผลใดๆ เมื่อระบุประเภทสื่อ แม้ว่าจะส่งผลให้กฎ @import ปกติไม่ถูกต้องก็ตาม
B.
ตัวอย่าง
การนับที่เพิ่มขึ้น
| h2 { การเพิ่มขึ้นแบบเคาน์เตอร์: ส่วนหัว; - h2: ก่อน { เนื้อหา: ตัวนับ(ส่วนหัว) ". "; - |
คำอธิบาย
เทคนิค CSS นี้ช่วยให้คุณเพิ่มจำนวนที่ปรากฏก่อนองค์ประกอบที่ระบุโดยอัตโนมัติ โดยใช้ร่วมกับองค์ประกอบหลอกก่อนหน้า
สถานะการสนับสนุน
| IE6 หมายเลข IE7หมายเลข IE8 ใช่ |
C.
ตัวอย่าง
อักขระอ้างอิงสำหรับเนื้อหาที่สร้างขึ้น
| คิว { เครื่องหมายคำพูด: "'" "'"; - ถาม:ก่อน { เนื้อหา: open-quote; - ถาม:หลังจาก { เนื้อหา: คำพูดปิด; - |
คำอธิบาย
ระบุสัญญาณเรียกอ้างอิงที่ใช้ในการสร้างเนื้อหา เพื่อใช้กับแท็ก q
สถานะการสนับสนุน
| IE6 หมายเลข IE7หมายเลข IE8 ใช่ |
5. ข้อบกพร่องที่สำคัญและปัญหาความไม่เข้ากัน
ต่อไปนี้คือข้อบกพร่องจำนวนมากใน IE6 และ IE7 ที่ไม่ได้กล่าวถึงข้างต้น แน่นอนว่ารายการนี้ไม่รวมรายการที่ไม่รองรับในเบราว์เซอร์ทั้งสามตัว
IE6 Bugs
A. ไม่รองรับการจัดสไตล์องค์ประกอบ <abbr>
B. ไม่รองรับชื่อคลาสและ ID ที่ขึ้นต้นด้วยเครื่องหมายยัติภังค์และขีดล่าง
C องค์ประกอบ <select> จะปรากฏที่ด้านบนของสแต็กเสมอโดยไม่คำนึงถึงค่า z-index
D ถ้าไม่ได้ใช้คลาสหลอกของสมอในลำดับที่ถูกต้อง (:link, :visited, :hover) คลาสหลอก :hover จะไม่มีผลใดๆ
E. การประกาศ !important ของแอตทริบิวต์จะถูกแทนที่ด้วย unused !important declaration ของคุณลักษณะเดียวกันในกฎเดียวกัน
F. ความสูงมีลักษณะเหมือนความสูงขั้นต่ำ
G. ความกว้างมีลักษณะเหมือนความกว้างขั้นต่ำ
H. ขอบซ้ายและขวาสองเท่า
I. ขอบเส้นประ (เส้นประ) ดูเหมือนขอบเส้นประ (เส้นประ)
J. ค่าการลากเส้นของการตกแต่งข้อความ ข้อความมีลักษณะ สูงกว่าเบราว์เซอร์อื่นเล็กน้อย
หากรายการสั่งซื้อมีโครงสร้างคงที่ (haslayout เป็นจริง ไม่สามารถตั้งค่าความสูง/ความกว้าง/การซูมของ li เพื่อเปิดใช้งานค่า haslayout) หมายเลขซีเรียลจะไม่เพิ่มขึ้น แต่จะคงอยู่ที่ 1
L. องค์ประกอบรายการไม่รองรับค่าที่มีอยู่ทั้งหมดของ list-style-type
M. หากรายการลอย รายการ-สไตล์-อิมเมจที่ระบุจะไม่แสดง
N. @font-face ไม่รองรับ
O. บางส่วน ตัวเลือกจะจับคู่ความคิดเห็นและการประกาศเอกสารอย่างไม่ถูกต้อง
หากตัวเลือก ID ที่รวมกับตัวเลือกคลาสไม่ตรงกัน ตัวเลือก ID เดียวกันที่รวมกับตัวเลือกคลาสอื่นจะถือว่าไม่ตรงกันเช่นกัน
IE7 Bugs
A. หากรายการที่เรียงลำดับมีโครงสร้างคงที่ (haslayout เป็นจริง ไม่สามารถตั้งค่าความสูง/ความกว้าง/การซูมของ li เพื่อเปิดใช้งานค่า haslayout) หมายเลขซีเรียลจะไม่เพิ่มขึ้น แต่จะยังคงอยู่ที่ 1
B องค์ประกอบรายการคือ ไม่รองรับค่าที่มีอยู่ทั้งหมดของ list-style-type
C หากรายการเป็นแบบลอย list-style-image ที่ระบุจะไม่แสดง
D. @font-face ไม่รองรับอย่างสมบูรณ์
E. ตัวเลือกบางตัวจะจับคู่ไม่ถูกต้อง ความคิดเห็นและเอกสาร ข้อสงวนสิทธิ์
F. ข้อผิดพลาด IE บางอย่างที่ไม่ได้กล่าวถึงในที่นี้เกิดขึ้นเฉพาะในสภาพแวดล้อมที่เฉพาะเจาะจง และไม่ได้ถูกกำหนดให้กับคุณสมบัติหรือค่า CSS ที่เฉพาะเจาะจง