เพิ่มเติม
ดาวน์โหลดซอร์สโค้ด เกี่ยวกับการเขียนโปรแกรม ทรัพยากรสร้างเว็บไซต์ หนังสือและบทเรียน เกมมือถือ แอปมือถือ บทความ
หน้าแรก>การสอนการออกแบบเว็บไซต์>การทำให้เว็บเป็นมาตรฐาน

ความแตกต่างใน CSS ใน Internet Explorer 6, 7 และ 8(4)

ผู้เขียน：Eve Cole เวลาอัปเดต：2010-03-12 17:08:26
M.

ตัวอย่าง

การแบ่งส่วนหน้าในกล่อง

 

#กล่อง {
หน้าแบ่งภายใน: หลีกเลี่ยง;
-

 

คำอธิบาย

คุณสมบัตินี้กำหนดว่าเพจจะเกิดขึ้นภายในองค์ประกอบที่ระบุหรือไม่

สถานะการสนับสนุน

 

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. ไม่รองรับการจัดสไตล์องค์ประกอบ

B. ไม่รองรับชื่อคลาสและ ID ที่ขึ้นต้นด้วยเครื่องหมายยัติภังค์และขีดล่าง

C องค์ประกอบ