วันนี้ฉันกำลังดูไฟล์ css และพบชุดกฎต่อไปนี้:
div.with-some-class {
display:block;
margin:0;
padding:2px 0 0 0;
*padding:1px 0 0 0;
font-size:11px;
font-weight:normal;
*line-height:13px;
color:#3D9AD0;
}
ดาวหมายถึงอะไรใน * padding และ * line-height?
ขอบคุณ.
คำตอบ:
นี่คือ "การแฮ็กทรัพย์สินของดารา" ในบรรทัดเดียวกับ "การแฮ็กขีดล่าง" รวมถึงขยะก่อนคุณสมบัติที่ IE ละเว้น (* ทำงานได้ถึง IE 7, _ ถึง IE 6)
ใน CSS? ไม่มีอะไร; มันเป็นข้อผิดพลาด
เนื่องจากข้อบกพร่องใน Internet Explorer บางเวอร์ชันจึงไม่สามารถเพิกเฉยต่อชื่อคุณสมบัติที่ไม่ถูกต้องได้อย่างถูกต้องดังนั้นนี่จึงเป็นวิธีหนึ่งในการให้ CSS ที่เฉพาะเจาะจงสำหรับเบราว์เซอร์เหล่านั้น
การใช้ความคิดเห็นแบบมีเงื่อนไขนั้นชัดเจนและปลอดภัยกว่า
*คุณสมบัติก่อน หากได้รับความหมายเบราว์เซอร์ปัจจุบันจะเพิกเฉยทำให้สามารถเพิ่มส่วนขยายได้อย่างปลอดภัย นั่นคือประเด็นของกฎ "ต้องละเว้น"
อักขระเครื่องหมายดอกจันเป็นสัญลักษณ์แทนที่ถูกต้องใน CSS การใช้เพียงอย่างเดียวหมายความว่าคุณสมบัติ CSS ต่อไปนี้จะถูกใช้กับโหนดองค์ประกอบทั้งหมดใน DOM ตัวอย่าง:
*{color:#000;}
คุณสมบัติข้างต้นจะถูกนำไปใช้กับองค์ประกอบ DOM ทั้งหมดดังนั้นจึงเอาชนะการเรียงซ้อนตามธรรมชาติใน CSS สามารถแทนที่ได้โดยการติดแท็กองค์ประกอบ DOM โดยเฉพาะซึ่งการกำหนดเป้าหมายนั้นเริ่มต้นการอ้างอิงตัวระบุที่ไม่ซ้ำกัน ตัวอย่าง:
#uniqueValue div strong{color:#f00;}
คุณสมบัติข้างต้นจะแทนที่สัญลักษณ์แทนและสร้างข้อความขององค์ประกอบที่แข็งแกร่งทั้งหมดที่เกิดขึ้นใน div ภายในองค์ประกอบที่มีค่าแอตทริบิวต์ id เป็น "uniqueValue"
การใช้สัญลักษณ์แทนที่ใช้กันทั่วไปเช่นตัวอย่างแรกอาจเป็นวิธีที่รวดเร็วและสกปรกในการเขียนสไตล์ชีตรีเซ็ต มันรวดเร็วและสกปรกเนื่องจากคำจำกัดความอย่างละเอียดของการนำเสนอหลังสัญลักษณ์แทนจะสร้างสไตล์ชีตที่ป่องมาก หากคุณจะใช้สัญลักษณ์แทนฉันขอแนะนำให้ใช้โดยเฉพาะอย่างยิ่งเช่น:
* strong{color:#f00;}
ตัวอย่างข้างต้นจะทำให้ข้อความขององค์ประกอบที่แข็งแกร่งทั้งหมดเป็นสีแดงโดยไม่คำนึงถึงคุณสมบัติ CSS อื่น ๆ ที่ไม่ได้ระบุด้วยตัวระบุที่ไม่ซ้ำกัน นี่ถือว่าปลอดภัยกว่าการใช้คำประกาศ "! important" มากเนื่องจากการประกาศดังกล่าวเป็นที่ทราบกันดีว่าก่อให้เกิดการรบกวนการทำงานตามธรรมชาติของพฤติกรรมที่ตั้งใจไว้และเป็นฝันร้ายของการบำรุงรักษา
เครื่องหมายดอกจันในตัวอย่างของคุณอยู่ผิดตำแหน่งเนื่องจากดูเหมือนว่าจะเกิดขึ้นในการประกาศคุณสมบัติรหัสที่อยู่ในวงเล็บปีกกาและอาจทำให้เกิดข้อผิดพลาด
นี่คือแฮ็คสำหรับ IE7
ถ้าคุณเขียนสิ่งนี้:
.test {
z-index: 1;
*z-index: 2;
}
บนเนวิเกเตอร์ทั้งหมดที่เคารพ W3C Standard <div class="test"></div>HTMLElement มีz-index: 1แต่สำหรับ IE7 องค์ประกอบนี้มีz-index: 2.
นี่ไม่ใช่มาตรฐาน
เพื่อให้บรรลุสิ่งเดียวกันกับ W3C Standard ให้ทำตามขั้นตอนนี้:
เพิ่มข้อคิดเห็นแบบมีเงื่อนไขของ Internet Explorer (นี่เป็นความคิดเห็น HTML แบบง่ายสำหรับ navigateur อื่น ๆ ทั้งหมดดังนั้นจึงเป็นวิธีมาตรฐาน)
<! - [ถ้า IE 7]> <html lang = "fr" class = "ie7"> <! [endif] ->
<! - [ถ้า gt IE 7]> <! -> <html lang = "fr"> <! - <! [endif] ->
และใช้กฎก่อนหน้านี้ดังนี้:
.test {
z-index: 1;
}
.ie7 .test {
z-index: 2;
}