list-style:none ในการรีเซ็ต css

ผู้เขียน：Eve Cole เวลาอัปเดต：2010-05-22 15:52:43

ปรากฎว่าฉันเคยพบพฤติกรรมผิดปกติบางอย่างในรายการ UL ในที่ทำงาน
นอกจากนี้ฉันเห็นโพสต์ http://bbs.blueidea.com/thread-2984871-1-1.html เมื่อวานนี้ ดังนั้นฉันจึงทดสอบคุณลักษณะต่างๆ ของ list-style และค้นพบปรากฏการณ์ที่น่าสนใจ

มาดูคำอธิบายของ list-style ในคู่มือ CSS ก่อน

ความหมายและการใช้งาน
แอตทริบิวต์ชวเลขสไตล์รายการตั้งค่าคุณสมบัติรายการทั้งหมดในการประกาศเดียว

แสดงให้เห็น
คุณสมบัตินี้เป็นคุณสมบัติชวเลขที่ครอบคลุมคุณสมบัติสไตล์รายการอื่นๆ ทั้งหมด เนื่องจากมันใช้กับองค์ประกอบทั้งหมดที่มีการแสดง list-item จึงสามารถใช้ได้กับองค์ประกอบ li ใน HTML และ XHTML ปกติเท่านั้น แต่ในความเป็นจริงแล้ว มันสามารถนำไปใช้กับองค์ประกอบใดก็ได้ และสืบทอดโดยองค์ประกอบ list-item
คุณสมบัติต่อไปนี้สามารถตั้งค่าตามลำดับ:
•รายการสไตล์ประเภท
•รายการสไตล์ตำแหน่ง
•รายการสไตล์ภาพ
ไม่จำเป็นต้องตั้งค่าใดค่าหนึ่ง ตัวอย่างเช่น อนุญาตให้ใช้ "list-style:circle inside;" คุณสมบัติที่ไม่ได้ตั้งค่าไว้จะใช้ค่าเริ่มต้น
ค่าเริ่มต้น: ดิสก์ภายนอกไม่มี

ในการทำงานประจำวัน มักจำเป็นต้องทำการรีเซ็ต CSS บน ul และ li เพื่อซ่อนสัญลักษณ์รายการ
วิธีการเขียนที่ใช้กันมากที่สุดคือ Ul,li,ol{list-style:none;} (บางคนก็ใช้ ul,li,ol{list-style-type:none;})

ไม่มีปัญหากับหน้านี้ใน IE6, 7, 8 และ FF

แต่สิ่งที่เราไม่สามารถละเลยได้ก็คือ list-style: มีคุณลักษณะสามประการ:

รายการสไตล์ประเภท
รายการสไตล์ตำแหน่ง
รายการสไตล์ img

หากคุณไม่ใส่ใจกับคุณลักษณะทั้งสามนี้ list-style บางครั้งอาจทำให้เกิดปัญหาได้

ตัวอย่างเช่น เมื่อ ul ต้องการ display:inline หลังจากลอยตัวแล้ว เพื่อแก้ไขปัญหาระยะขอบสองเท่าใน IE6 มีบางอย่างแปลก ๆ เกิดขึ้น:

.ul01{ลอย:ซ้าย;จอแสดงผล:อินไลน์;}
.ul01,.ul01 li{รายการสไตล์:ไม่มี;}

หน้าด้านบนยังคงเป็นปกติใน IE8 และ ff แต่ใน IE6 และ 7 มีระยะห่างระหว่างด้านในของ ul และ li
จะเห็นได้ว่าเมื่อเรากำหนด list-style:none แม้ว่าสัญลักษณ์รายการจะไม่ปรากฏ แต่ตำแหน่งของมันยังคงอยู่ใน IE6 และ 7
ดูว่า UL นี้มีคุณสมบัติอะไรบ้างใน FF

ดังที่เห็นได้จากรูปภาพ เมื่อ list-style:none ถูกกำหนดไว้ใน css ก็ไม่มีผลต่อ list-style-position แต่ยังคงเป็นการตั้งค่าเริ่มต้นของเบราว์เซอร์ FF และค่านั้นอยู่ภายนอก
ใน IE6 และ 7 list-style-position: inside น่าจะเป็นค่าเริ่มต้น
เพื่อยืนยันสิ่งนี้ ฉันจึงเปลี่ยน list-style:none เป็น list-style:none inside none และทดสอบอีกครั้ง

หลังจากรันแล้ว คุณจะพบว่าใน IE6 และ 7 มีลักษณะการทำงานเหมือนกับ list-style:none ทุกประการ
ดังนั้นฉันจึงคาดการณ์ว่าใน IE6 และ 7 เมื่อ UL มีแอตทริบิวต์ float:left และ display:inline และ list-style:none ถูกตั้งค่า list-style-position ก็มีค่าเริ่มต้นเป็นภายในเช่นกัน

ดังนั้นข้อสรุปที่ฉันได้คือภายใต้ IE6 และ 7 เมื่อ UL ไม่มี float:left;display:inline;:
ไม่ว่าจะมีแอตทริบิวต์ list-style:none หรือไม่ก็ตาม สัญลักษณ์รายการจะถูกซ่อนไว้และไม่ใช้พื้นที่ (5, 6 ในโค้ดด้านล่าง)
เมื่อ UL มีแอตทริบิวต์ float:left;display:inline;
list-style:none สัญลักษณ์รายการถูกซ่อนอยู่ แต่ตำแหน่งยังคงอยู่ (list-style-position:inside); (UL1, ul3 ในโค้ดด้านล่าง)
list-style:none ไม่ได้ตั้งค่าไว้ อักขระรายการถูกซ่อนอยู่และไม่ได้ใช้ตำแหน่ง (list-style-position:outside) (รหัส UL4)

UL02 ทำงานได้ค่อนข้างดีในทุกเบราว์เซอร์ที่เข้าร่วมการทดสอบ

โค้ดชิ้นสุดท้ายนี้เปรียบเทียบประสิทธิภาพของ list-style ภายใต้สถานการณ์ต่างๆ โดยเฉพาะประสิทธิภาพของ 4, 5 และ 6 ภายใต้ IE6 และ 7

เรียกใช้กล่องรหัส
<!DOCTYPE html สาธารณะ "-//W3C//DTD XHTML 1.0 การเปลี่ยนผ่าน//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http //www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>รายการสไตล์: ไม่มีหรือ list-style:none ภายนอกไม่มี;</title> <style type="text/css"> body,ul,li,p {padding:0;margin:0;font-size:12px;} p{font :bold 16px/180% arial;} div {float:left;display:inline;พื้นหลัง:#eee;margin:0 10px 10px 0;} p span {การตกแต่งข้อความ: line-through;} ul {width:275px; ระยะขอบ:4px 0 0 15px;พื้นหลัง:aqua;} .ul01,.ul02,.ul03,.ul04{float:left;display:inline;} .ul01,.ul01 li{list-style:none;} .ul02, .ul02 li{รายการ-สไตล์:ไม่มีภายนอกไม่มี;} .ul03,.ul03 li{รายการ-สไตล์:ไม่มีภายในไม่มี;} .ul04,.ul04 li{} .ul05{} .ul05,.ul05 li{รายการ- สไตล์:ไม่มี;} .ul06{} .ul06,.ul06 li{} </style> </head> <body> <div> <p>1:float:left;display:inline; </p> <ul class="ul01"> <li><a href="#">คำพูดที่บริสุทธิ์ ความฝันแปลก ๆ และความคิดที่เร่งรีบ</a></li> <li><a href="#" > เช่นเดียวกับความรัก ข้อกำหนดก็เกือบจะสมบูรณ์แบบ</a></li> <li><a href="#">เด็กชายและเด็กหญิงที่ไร้เดียงสาและอ่อนเยาว์ในมหาวิทยาลัย</a></li> <li> < a href="#">ฉันลังเลและลังเล และฉันสูญเสียความรู้สึกของการห่างไกลไปนานแล้ว</a></li> <li><a href="#">มองหน้าเธอและท่องสิ่งที่คุ้นเคยและไม่คุ้นเคย คำกลอน</a></li> <li><a href="#">คำเหล่านี้อธิบายจิตวิญญาณของเด็กผู้หญิงได้อย่างสมบูรณ์แบบ</a></li> <li><a href="#"> สอดประสานกัน เบาะแสแสงและความมืดและตัวละครเอกที่ไม่แน่นอน</a></li> <li><a href="#">ความรู้สึกละเอียดอ่อนและจริงใจค่อยๆ ปรากฏและดื่มด่ำ</a></li> <li ><a href ="#">อารมณ์ที่มีความหนาแน่นสูงหมักซ้ำ ๆ ในข้อความ</a></li> </ul> </div> <div> <p>2:float:left;display:inline; ไม่มีภายนอกไม่มี;</p> <ul class="ul02"> <li><a href="#">คำพูดที่บริสุทธิ์ ความฝันแปลก ๆ และความคิดที่เร่งรีบ</a></li> <li ><a href= "#">เช่นเดียวกับความรัก ข้อกำหนดก็เกือบจะสมบูรณ์แบบ</a></li> <li><a href="#">เด็กชายและเด็กหญิงที่ไร้เดียงสาและอ่อนเยาว์ในมหาวิทยาลัย</a ></li> <li><a href="#">ฉันลังเลจนไม่รู้สึกถึงความห่างไกลอีกต่อไป</a></li> <li><a href="#">มองดูเธอ ใบหน้าท่องคุ้นเคยแต่ไม่คุ้นเคย โองการ</a></li> <li><a href="#">คำเหล่านี้อธิบายจิตวิญญาณของเด็กผู้หญิงได้อย่างสมบูรณ์แบบ</a></li> <li> <a href="#">แสงที่สอดประสานกัน และเบาะแสอันมืดมนและตัวละครเอกที่ไม่แน่นอน</a></li> <li><a href="#">ความรู้สึกละเอียดอ่อนและจริงใจค่อยๆ ดื่มด่ำ</a> a></li> <li><a href= "#">อารมณ์ที่มีความหนาแน่นสูงหมักซ้ำแล้วซ้ำอีกในข้อความ</a></li> </ul> </div> <div> <p>3: float:left;display:inline;list-style:none ไม่มีอยู่ข้างใน;</p> <ul class="ul03"> <li><a href="#">คำพูดที่บริสุทธิ์ ความฝันแปลก ๆ ความคิดที่เร่งรีบ</p> a></li> <li><a href ="#">เช่นเดียวกับความรัก ข้อกำหนดเกือบจะสมบูรณ์แบบ</a></li> <li><a href="#">แสงสว่างในมหาวิทยาลัย เด็กผู้ชายและเด็กผู้หญิงที่อ่อนเยาว์และไร้เดียงสา</a></li> <li><a href="#">ฉันลังเลและลังเล และฉันสูญเสียความรู้สึกของการห่างไกลไปนานแล้ว</a></li> <li><a href= "#">เมื่อมองดูใบหน้าของเธอและ ท่องบทที่คุ้นเคยแต่ไม่คุ้นเคย</a></li> <li><a href="#">คำเหล่านี้อธิบายจิตวิญญาณของหญิงสาวได้อย่างสมบูรณ์แบบ</a ></li> <li><a href="#"> เบาะแสแสงและความมืดที่สอดประสานกันและตัวละครเอกที่ไม่แน่นอน</a></li> <li><a href="#">ความรู้สึกละเอียดอ่อนและจริงใจค่อยๆ เน้นและดื่มด่ำ</a></li> <li><a href ="#">อารมณ์ที่มีความหนาแน่นสูงหมักซ้ำ ๆ ซ้ำ ๆ ในข้อความ</a></li> </ul> </div> <div> <p>4:float:left;display:inline;ไม่มีการรีเซ็ต css< /p> <ul class="ul04"> <li><a href="#">ข้อความล้วนๆ ความคิดควบม้าชวนฝันอันแปลกประหลาด</a></li> <li><a href="#">เหมือนกับ ความรัก ข้อกำหนดนี้เกือบจะสมบูรณ์แบบแล้ว</a></li> <li><a href="#"> เด็กชายและเด็กหญิงที่ไร้เดียงสาและอ่อนเยาว์ในมหาวิทยาลัย</a></li> <li><a href ="#">ฉันลังเลและลังเล และฉันไม่รู้สึกถึงความห่างไกลอีกต่อไป</a></li> <li> <a href="#">มองหน้าเธอและท่องบทที่คุ้นเคยแต่ไม่คุ้นเคย< /a></li> <li><a href="#">คำเหล่านี้อธิบายจิตวิญญาณของหญิงสาวได้อย่างสมบูรณ์แบบ</a></li> <li><a href="#">เบาะแสแสงและความมืดที่สอดประสานกัน และ ตัวละครเอกที่ไม่แน่นอน</a></li> <li><a href="#">ละเอียดอ่อนและละเอียดอ่อน ความรู้สึกจริงใจค่อยๆ ปรากฏและดื่มด่ำ</a></li> <li><a href="#" >อารมณ์ที่มีความหนาแน่นสูงหมักซ้ำแล้วซ้ำอีกในข้อความ</a></li> </ul> </div> <div> <p>5: ไม่มีการแสดงผล, รายการคุณลักษณะลอยตัวคือไม่มี</p> < ul class="ul05"> <li><a href="#">ข้อความล้วนแปลก ชวนฝันและคิดฟุ้งซ่าน</a></li> <li><a href="#">เช่นเดียวกับความรัก ข้อกำหนดเกือบจะสมบูรณ์แบบ</a></li> <li><a href=" #">เด็กชายและเด็กหญิงที่อ่อนเยาว์และไร้เดียงสาในมหาวิทยาลัย</a></li> <li><a href=" #">ฉันลังเลและลังเล และฉันสูญเสียความรู้สึกของการห่างไกลไปนานแล้ว</a></li> <li><a href="#">มองหน้าเธอและท่องบทที่คุ้นเคยแต่ไม่คุ้นเคย</a ></li> <li><a href="#">คำเหล่านี้อธิบายจิตวิญญาณของหญิงสาวได้อย่างชัดเจน</a></li> <li><a href="#">เบาะแสแสงและความมืดที่สอดประสานกันและตัวละครเอกที่ไม่แน่นอน </a></li> <li><a href="#" >ความรู้สึกละเอียดอ่อนและจริงใจค่อยๆ ปรากฏและดื่มด่ำ</a></li> <li><a href="#">ความหนาแน่นสูง อารมณ์หมักหมมซ้ำแล้วซ้ำอีกในข้อความ</a></li> < /ul> </div> <div> <p>6: No display, no float คุณลักษณะ list-style:none;</p> <ul class= "ul06"> <li><a href="#"> คำพูดที่บริสุทธิ์ ความฝันแปลก ๆ และความคิดที่เร่งรีบ</a></li> <li><a href="#">เช่นเดียวกับความรัก ข้อกำหนดก็เกือบจะเหมือนกัน สมบูรณ์แบบ</a></li> <li>< a href="#">เด็กชายและเด็กหญิงไร้เดียงสาและอ่อนเยาว์ในมหาวิทยาลัย</a></li> <li><a href="#">ฉัน ฉันลังเลและลังเล และฉันสูญเสียความรู้สึกของระยะทางไปนานแล้ว</a> </li> <li><a href="#">มองหน้าเธอและท่องบทที่คุ้นเคยแต่ไม่คุ้นเคย</a></li > <li><a href="#">คำพูดเหล่านั้นถูกต้อง มันอธิบายจิตวิญญาณของหญิงสาวได้อย่างสมบูรณ์แบบ</a></li> <li><a href="#">เบาะแสแสงและความมืดที่สอดประสานกันและตัวละครเอกที่ไม่แน่นอน </a></li> <li><a href ="#">ความรู้สึกละเอียดอ่อนและจริงใจค่อยๆ ปรากฏและดื่มด่ำ</a></li> <li><a href="#">ความหนาแน่นสูง อารมณ์หมักดองซ้ำแล้วซ้ำอีกในข้อความ</a>< /li> </ul> </div> </body> </html>
[Ctrl+A เลือกเคล็ดลับทั้งหมด: คุณสามารถแก้ไขบางส่วนของโค้ดก่อนแล้วจึงกด Run]

เมื่อเปรียบเทียบผลลัพธ์ประสิทธิภาพของโค้ดข้างต้น ฉันคิดว่า:
ใน Firefox ตราบใดที่ list-style-type ยังไม่มี ไม่ว่าค่าของ list-stype-position จะอยู่ภายนอกหรือภายในก็ตาม list-style ก็สามารถซ่อนไว้ได้เป็นอย่างดี ใน IE6 และ 7 จะมีการตั้งค่าเฉพาะ list-style:none เท่านั้น . ไม่เพียงพอที่จะแก้ปัญหาทั้งหมด ดังนั้นฉันคิดว่าควรใช้ list-style:none ภายนอก none เมื่อรีเซ็ต css