gaya daftar: tidak ada di reset css

Penulis：Eve Cole Waktu Pembaruan：2010-05-22 15:52:43

Ternyata saya pernah menemukan beberapa perilaku abnormal pada daftar UL di tempat kerja.
Selain itu, saya melihat postingan http://bbs.blueidea.com/thread-2984871-1-1.html kemarin, jadi saya menguji berbagai atribut gaya daftar dan menemukan fenomena menarik.

Mari kita lihat penjelasan list-style pada manual CSS terlebih dahulu.

Definisi dan penggunaan
Atribut singkatan gaya daftar menyetel semua properti daftar dalam satu deklarasi.

menjelaskan
Properti ini adalah properti singkatan yang mencakup semua properti gaya daftar lainnya. Karena ini berlaku untuk semua elemen dengan tampilan item daftar, ini hanya dapat digunakan pada elemen li dalam HTML dan XHTML normal, namun sebenarnya ini dapat diterapkan ke elemen apa pun dan diwarisi oleh elemen item daftar.
Properti berikut dapat diatur secara berurutan:
• tipe gaya daftar
•posisi-gaya-daftar
•daftar-gaya-gambar
Tidak perlu menetapkan salah satu nilai. Misalnya, "gaya daftar:lingkaran di dalam;" juga diperbolehkan. Properti yang tidak disetel menggunakan nilai defaultnya.
Nilai default: tidak ada disk di luar

Dalam pekerjaan sehari-hari, sering kali perlu melakukan reset css pada ul dan li untuk menyembunyikan simbol daftar.
Cara penulisan yang paling umum digunakan adalah Ul,li,ol{list-style:none;} (beberapa orang juga menggunakan ul,li,ol{list-style-type:none;})

Tidak ada masalah dengan halaman ini di IE6, 7, 8, dan FF.

Namun yang tidak bisa kita abaikan adalah list-style: berisi tiga atribut:

tipe gaya daftar
posisi gaya daftar
daftar-gaya-img

Jika Anda tidak memperhatikan ketiga atribut ini, gaya daftar terkadang akan menimbulkan masalah.

Misalnya, ketika ul, setelah mengambang, memerlukan display:inline untuk menyelesaikan masalah margin ganda di IE6, sesuatu yang aneh terjadi:

.ul01{float:kiri;tampilan:sebaris;}
.ul01,.ul01 li{gaya daftar:tidak ada;}

Halaman di atas masih normal di IE8 dan ff, namun di IE6 dan 7 ada jarak antara bagian dalam ul dan li.
Terlihat ketika kita mendefinisikan list-style:none, walaupun simbol list tidak muncul, namun posisinya masih tertinggal di IE6 dan 7.
Lihat atribut apa saja yang dimiliki UL ini di FF

Terlihat dari gambar, ketika list-style:none didefinisikan di css, tidak berpengaruh pada list-style-position. Ini masih merupakan setting default browser FF, dan nilainya di luar.
Di IE6 dan 7, list-style-position: inside kemungkinan besar menjadi default
Untuk mengonfirmasi hal ini, saya mengubah list-style:none menjadi list-style:none di dalam none dan mengujinya lagi

Setelah menjalankannya, Anda dapat menemukan bahwa di IE6 dan 7, perilakunya persis sama dengan list-style:none.
Jadi saya berspekulasi bahwa di IE6 dan 7, ketika UL memiliki atribut float:left dan display:inline dan list-style:none disetel, list-style-position juga default ke inside;

Jadi kesimpulan yang saya dapatkan adalah bahwa di bawah IE6 dan 7, ketika UL tidak memiliki float:left;display:inline;:
Terlepas dari apakah ada atribut list-style:none, simbol daftar disembunyikan dan tidak menempati ruang (5, 6 pada kode di bawah)
Ketika UL memiliki atribut float:left;display:inline;
list-style:none, simbol list disembunyikan, namun posisinya tetap di kiri (list-style-position:inside);
list-style:none tidak disetel; karakter daftar disembunyikan dan tidak menempati posisi (list-style-position:outside) (kode UL4)

UL02 berkinerja relatif baik di semua browser yang berpartisipasi dalam pengujian ini.

Potongan kode terakhir ini membandingkan kinerja gaya daftar dalam berbagai keadaan, terutama kinerja 4, 5, dan 6 pada IE6 dan 7.

Jalankan kotak kode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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>gaya daftar: tidak ada atau gaya daftar: tidak ada di luar tidak ada;</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;background:#eee;margin:0 10px 10px 0;} p span{text-decoration:line-through;} ul{width:275px; margin:4px 0 0 15px;background:aqua;} .ul01,.ul02,.ul03,.ul04{float:left;display:inline;} .ul01,.ul01 li{list-style:none;} .ul02, .ul02 li{list-style:none outside none;} .ul03,.ul03 li{list-style:none inside none;} .ul04,.ul04 li{} .ul05{} .ul05,.ul05 li{list- style:none;} .ul06{} .ul06,.ul06 li{} </style> </head> <body> <div> <p>1:float:left;display:inline; </p> <ul class="ul01"> <li><a href="#">Kata-kata murni, mimpi aneh, dan pikiran terburu-buru</a></li> <li><a href="#" > Sama seperti cinta, persyaratannya hampir sempurna</a></li> <li><a href="#">Cewek-cowok muda dan lugu di kampus</a></li> <li> < a href="#">Saya ragu-ragu dan ragu-ragu, dan saya sudah lama kehilangan rasa jarak</a></li> <li><a href="#">Melihat wajahnya dan melafalkan familiar dan asing kata-kata Ayat</a></li> <li><a href="#">Kata-kata itu dengan sempurna menggambarkan semangat seorang gadis</a></li> <li><a href="#"> Interlaced petunjuk terang dan gelap serta protagonis yang tidak pasti</a></li> <li><a href="#">Perasaan yang lembut dan tulus perlahan-lahan muncul dan menjadi mendalam</a></li> <li ><a href ="#">Emosi dengan kepadatan tinggi bergejolak berulang kali dalam teks</a></li> </ul> </div> <div> <p>2:float:left;display:inline; tidak ada di luar tidak ada;</p> <ul class="ul02"> <li><a href="#">Kata-kata murni, mimpi aneh, dan pikiran terburu-buru</a></li> <li ><a href= "#">Sama seperti cinta, persyaratannya hampir sempurna</a></li> <li><a href="#">Pria dan wanita muda dan polos di kampus</a ></li> <li><a href="#">Saya sangat ragu hingga tidak lagi merasakan jarak</a></li> <li><a href="#">Memandangnya Wajahnya familier namun asing bait</a></li> <li><a href="#">Kata-kata itu dengan sempurna menggambarkan semangat seorang gadis</a></li> <li> <a href="#">Cahaya yang saling bertautan dan petunjuk kelam serta protagonis yang tidak pasti</a></li> <li><a href="#">Perasaan yang lembut dan tulus perlahan-lahan menjadi mendalam</a> a></li> <li><a href= "#">Emosi dengan kepadatan tinggi bergejolak berulang kali dalam teks</a></li> </ul> </div> <div> <p>3: float:left;display:inline;list-style:none tidak ada di dalam;</p> <ul class="ul03"> <li><a href="#">Kata-kata murni, mimpi aneh, pikiran terburu-buru</p> a></li> <li><a href ="#">Sama seperti cinta, persyaratannya hampir sempurna</a></li> <li><a href="#">Cahaya di kampus Laki-laki dan perempuan yang muda dan polos</a></li> <li><a href="#">Saya ragu-ragu dan ragu-ragu, dan saya sudah lama kehilangan rasa jarak</a></li> <li><a href= "#">Melihat wajahnya dan melantunkan ayat-ayat yang akrab namun asing</a></li> <li><a href="#">Kata-kata itu dengan sempurna menggambarkan jiwa seorang gadis</a ></li> <li><a href="#"> Petunjuk terang dan gelap yang saling terkait dan protagonis yang tidak pasti</a></li> <li><a href="#">Perasaan yang lembut dan tulus secara bertahap Ditonjolkan dan mendalam</a></li> <li><a href ="#">Emosi dengan kepadatan tinggi bergejolak berulang kali dalam teks</a></li> </ul> </div> <div> <p>4:float:left;display:inline;no css reset< /p> <ul class="ul04"> <li><a href="#">Teks murni, Pikiran berlari kencang yang aneh</a></li> <li><a href="#">Sama seperti cinta, persyaratannya hampir sempurna</a></li> <li><a href="#"> Lelaki dan perempuan yang lemah muda dan lugu di kampus</a></li> <li><a href ="#">Saya ragu-ragu dan ragu-ragu, dan saya tidak lagi merasakan jarak</a></li> <li> <a href="#">Memandang wajahnya dan melafalkan ayat-ayat yang familiar namun asing< /a></li> <li><a href="#">Kata-kata itu dengan sempurna menggambarkan Jiwa seorang gadis</a></li> <li><a href="#">Petunjuk terang dan gelap yang saling terkait dan protagonis yang tidak pasti</a></li> <li><a href="#">Halus dan halus Perasaan tulus perlahan-lahan muncul dan menjadi mendalam</a></li> <li><a href="#" >Emosi dengan kepadatan tinggi bergejolak berulang kali dalam teks</a></li> </ul> </div> <div> <p>5: Tidak ada tampilan, gaya daftar atribut float tidak ada;</p> < ul class="ul05"> <li><a href="#">Teks murni itu aneh Pikiran melamun dan terburu-buru</a></li> <li><a href="#">Sama seperti cinta, persyaratannya hampir sempurna</a></li> <li><a href=" #">Anak-anak muda dan polos di kampus</a></li> <li><a href=" #">Saya ragu-ragu dan ragu-ragu, dan saya sudah lama kehilangan rasa jarak</a></li> <li><a href="#">Melihat wajahnya dan melafalkan ayat-ayat yang familiar namun asing</a ></li> <li><a href="#">Kata-kata itu dengan tepat menggambarkan Jiwa Seorang Gadis</a></li> <li><a href="#">Petunjuk terang dan gelap yang saling terkait dan protagonis yang tidak pasti </a></li> <li><a href="#" >Perasaan yang lembut dan tulus secara bertahap muncul dan menjadi mendalam</a></li> <li><a href="#">Kepadatan tinggi emosi bergejolak berulang kali dalam teks</a></li> </ul> </div> <div> <p>6: Tidak ada tampilan, tidak ada atribut float list-style:none;</p> <ul class= "ul06"> <li><a href="#"> Kata-kata murni, mimpi aneh, dan pikiran terburu-buru</a></li> <li><a href="#">Sama seperti cinta, persyaratannya hampir sempurna</a></li> <li>< a href="#">Anak laki-laki dan perempuan yang lemah dan lugu di kampus</a></li> <li><a href="#">Saya Aku ragu-ragu dan ragu-ragu, dan aku sudah lama kehilangan rasa jarak</a> </li> <li><a href="#">Melihat wajahnya dan melafalkan ayat-ayat yang familiar namun asing</a></li > <li><a href="#">Kata-kata itu tepat sekali. Sangat menggambarkan jiwa seorang gadis</a></li> <li><a href="#">Petunjuk terang dan gelap yang saling terkait dan protagonis yang tidak pasti </a></li> <li><a href ="#">Perasaan yang lembut dan tulus secara bertahap muncul dan menjadi mendalam</a></li> <li><a href="#">Kepadatan tinggi emosi bergejolak berulang kali dalam teks</a>< /li> </ul> </div> </body> </html>
[Ctrl+A Pilih Semua Tip: Anda dapat memodifikasi sebagian kode terlebih dahulu lalu tekan Jalankan]

Dengan membandingkan hasil kinerja kode di atas, menurut saya:
Di Firefox, selama tipe gaya daftar tidak ada, tidak peduli nilai posisi tipe daftar di luar atau di dalam, gaya daftar dapat disembunyikan dengan baik. Di IE6 dan 7, hanya gaya daftar: tidak ada yang disetel , tidak cukup untuk menyelesaikan semua masalah, jadi menurut saya lebih baik menggunakan list-style:none di luar none ketika css direset.