نمط القائمة: لا شيء في إعادة تعيين CSS

الكاتب：Eve Cole وقت التحديث：2010-05-22 15:52:43

اتضح أنني واجهت بعض السلوكيات غير الطبيعية في قائمة UL في العمل.
بالإضافة إلى ذلك، رأيت المنشور http://bbs.blueidea.com/thread-2984871-1-1.html بالأمس، لذلك اختبرت سمات مختلفة لنمط القائمة واكتشفت ظاهرة مثيرة للاهتمام.

دعونا نلقي نظرة على شرح نمط القائمة في دليل CSS أولاً.

التعريف والاستخدام
تقوم السمة المختصرة لنمط القائمة بتعيين جميع خصائص القائمة في إعلان واحد.

يوضح
هذه الخاصية هي خاصية مختصرة تغطي كافة خصائص نمط القائمة الأخرى. نظرًا لأنه ينطبق على جميع العناصر التي تحتوي على عرض عنصر القائمة، فلا يمكن استخدامه إلا على عناصر li في HTML وXHTML العاديين، ولكن في الواقع يمكن تطبيقه على أي عنصر ويتم توريثه بواسطة عنصر عنصر القائمة.
يمكن ضبط الخصائص التالية بالترتيب:
• نوع القائمة
• قائمة نمط الموقف
•قائمة نمط الصورة
ليس من الضروري تعيين إحدى القيم، على سبيل المثال، "list-style:circle inside;" مسموح به أيضًا. الخصائص التي لم يتم تعيينها تستخدم قيمها الافتراضية.
القيمة الافتراضية: القرص خارج لا شيء

في العمل اليومي، غالبًا ما يكون من الضروري إجراء إعادة تعيين CSS على ul وli لإخفاء رموز القائمة.
الطريقة الأكثر استخدامًا في الكتابة هي Ul,li,ol{list-style:none;} (يستخدم بعض الأشخاص أيضًا ul,li,ol{list-style-type:none;})

لا توجد مشكلة في هذه الصفحة في IE6 و7 و8 وFF.

ولكن ما لا يمكننا تجاهله هو أن نمط القائمة: يحتوي على ثلاث سمات:

نوع نمط القائمة
موضع نمط القائمة
قائمة نمط img

إذا لم تنتبه لهذه السمات الثلاث، فسيتسبب نمط القائمة في بعض الأحيان في حدوث مشكلات.

على سبيل المثال، عندما يحتاج ul، بعد التعويم، إلى العرض: مضمن لحل مشكلة الهامش المزدوج في IE6، يحدث شيء غريب:

.ul01{تعويم:يسار؛عرض:مضمن؛}
.ul01,.ul01 لي {قائمة نمط: لا شيء؛}

الصفحة أعلاه لا تزال طبيعية في IE8 وff، ولكن في IE6 و7، هناك مسافة بين الجزء الداخلي من ul وli.
يمكن ملاحظة أنه عندما نحدد نمط القائمة: لا شيء، على الرغم من عدم ظهور رمز القائمة، إلا أن موضعه لا يزال موجودًا في IE6 و7.
تعرف على السمات التي يتمتع بها UL هذا في FF

كما يتبين من الصورة، عندما يتم تعريف نمط القائمة: لا شيء في CSS، فلن يكون له أي تأثير على موضع نمط القائمة، ولا يزال الإعداد الافتراضي لمتصفح FF، والقيمة خارجه.
في IE6 و7، من المرجح أن يكون list-style-position: inside هو الإعداد الافتراضي
لتأكيد ذلك، قمت بتغيير نمط القائمة: لا شيء إلى نمط القائمة: لا شيء داخل لا شيء واختبرته مرة أخرى

بعد تشغيله، يمكنك أن تجد أنه في IE6 و7، يتصرف تمامًا مثل نمط القائمة: لا شيء.
لذلك أعتقد أنه في IE6 و7، عندما يحتوي UL على سمات float:left وdisplay:inline ونمط القائمة: لا شيء، يتم تعيين موضع نمط القائمة أيضًا على الداخل؛

لذا فإن الاستنتاج الذي توصلت إليه هو أنه في ظل IE6 و7، عندما لا يكون لدى UL float:left;display:inline;:
بغض النظر عما إذا كان هناك نمط القائمة للسمة: لا شيء، فإن رموز القائمة مخفية ولا تشغل مساحة (5، 6 في الكود أدناه)
عندما يكون لدى UL سمة float:left;display:inline;
نمط القائمة: لا شيء، رمز القائمة مخفي، لكن الموضع لا يزال موجودًا (نمط القائمة: الموضع: بالداخل) (UL1، ul3 في الكود أدناه)
نمط القائمة: لا شيء لم يتم تعيينه؛ حرف القائمة مخفي ولا يشغل موضعًا (نمط القائمة: خارج) (رمز UL4)

كان أداء UL02 جيدًا نسبيًا في جميع المتصفحات المشاركة في الاختبار.

يقارن هذا الجزء الأخير من التعليمات البرمجية أداء نمط القائمة في ظل ظروف مختلفة، وخاصة أداء 4 و5 و6 ضمن IE6 و7.

تشغيل مربع التعليمات البرمجية
<!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>نمط القائمة: لا شيء أو نمط القائمة: لا شيء خارج لا شيء؛</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;} pspan{text-decoration: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 لي {نمط القائمة: لا شيء خارج لا شيء؛} .ul03،.ul03 لي {نمط القائمة: لا شيء داخل لا شيء؛} .ul04، .ul04 لي {} .ul05 {} .ul05، .ul05 لي {قائمة- style:none;} .ul06{} .ul06,.ul06 li{} </style> </head> <body> <div> <p>1:float:left;display:inline list-style:none; </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 list-style: لا شيء في الخارج لا شيء؛</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;no cssset< /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: لا يوجد عرض، ولا توجد سمة عائمة 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 تحديد كافة النصائح: يمكنك تعديل جزء من الكود أولاً ثم الضغط على تشغيل]

من خلال مقارنة نتائج أداء الكود أعلاه، أعتقد:
في Firefox، طالما أن نوع نمط القائمة لا شيء، بغض النظر عن قيمة موضع نوع القائمة بالخارج أو بالداخل، يمكن إخفاء نمط القائمة جيدًا في IE6 و7، يتم تعيين نمط القائمة فقط: لا شيء ، لا يكفي لحل جميع المشكلات، لذلك أعتقد أنه من الأفضل استخدام list-style:none خارج none عند إعادة تعيين CSS.