عرض الخطوط الديناميكية لقائمة CSS li في IE6

Question

لدي قائمة CSS مثل هذا:

<ul>
  <li><a>Item1</a></li>
  <li><a>Item Two</a></li>
  <li><a>Item C</a></li>
  <li><a>A Rather Long Menu Item Down Here</a></li>
</ul>

أريد إنشاء هذا:

|-----------------------------------|
| Item1                             |
|-----------------------------------|
| Item Two                          |
|-----------------------------------|
| Item C                            |
|-----------------------------------|
| A Rather Long Menu Item Down Here |
|-----------------------------------|

لكني أحصل على هذا:

 -------- 
| Item1 |
|----------- 
| Item Two |
|-----------
| Item C |
|----------------------------------- 
| A Rather Long Menu Item Down Here |
 ----------------------------------- 

إذا قمت بتعيين العلامات [li] أو [a] لعرض: كتلة، فإنها تمتد لملء أقصى عرض ممكن.أريدهم جميعًا أن يكون لهم نفس العرض، والذي يتم تحديده ديناميكيًا بواسطة العنصر الأوسع، بدلاً من وضع العرض يدويًا على العلامة [ul].

أوه، والهدف هو IE6.:)

تحديث:

width:1px, overflow:visible لم ينجح.(حصلت على نفس التأثير المضغوط كما هو الحال بدون شاشة العرض: المراسي المحظورة.)

هذا مخصص لشبكة إنترانت حيث يكون IE6 هو الهدف، لذا فأنا عالق هناك.(في مشاريع أخرى، توقفت عن القلق بشأن ذلك.) JavaScript متطلب، لذا ربما سأستخدمه.(أنا دائما أكره القيام بذلك، رغم ذلك.)

Answer 1

والخيار الوحيد هو جافا سكريبت.

وراجع للشغل، واحدة من بلدي المواقع يزوره كمية كبيرة من المستخدمين المنزليين. لقد رأينا أن IE6 وصولا الى 12٪ من حركة المرور لدينا. قبل شهرين كان 20٪. هذا في حين أن العام حركة المرور IE هو البقاء في 76٪

وجهة نظري هي أنك ربما لا ينبغي أن تقلق بشأن IE6 المراوغات كثيرا بعد الآن.

Answer 2

هذا بسيط بشكل ملحوظ:

<style>
ul {
float: left;
}
    ul li a {
    display: block;
    white-space: nowrap;
    border: 1px solid blue;
    }
</style>

<ul>
  <li><a>Item1</a></li>
  <li><a>Item Two</a></li>
  <li><a>Item C</a></li>
  <li><a>A Rather Long Menu Item Down Here</a></li>
</ul>

الحيلة هنا هي الجمع بين تعويم <ul> وإضافة مسافة بيضاء:norap;إلى المراسي المسدودة.في الحقيقة، أنت لا تحتاج حتى إلى "nowrap" إلا إذا كان <ul> الخاص بك يكافح من أجل الحصول على المساحة.أما بالنسبة لاقتراح تجاهل 12% من زوار موقعك..حسنًا...

Answer 3

وكمية معينة من القرصنة والعمل على انجاحه في IE6، لأن العرض: السيارات أبدا عملت حقا صحيح.

ولقد رأيت بعض الحلول لهذه المشكلة باستخدام العرض: 1PX. تجاوز: مرئية؛ والذي قد عمل في هذه الحالة، ولكن الأفضل أن تفعل ذلك في تعليق مشروط حتى لا تصل الاشياء في متصفحات "الحقيقية"، أو استخدام الإختراق هولي أو ما شابه ذلك. كن على علم بأن IE 6 من المحتمل أن التعامل مع هذا بشكل مختلف في وضع المراوغات إلى وضع المعايير، وحتى نعرف نوع المستند الخاص بك.

وراجع للشغل، من شأنه أن يضع علامات مرساة ك كتلة، حتى تحصل على أهداف العرض الماوس متناسقة.

Answer 4

لتحصل على Shrinkwrapped لا <م> لى داخل <م> المجاهدين مع خالص CSS لكن الاعراض متفاوتة محاولة:

ul,li {float:left;}
ul {overflow:hidden;}
li {clear:left;}

و(ثم ربما التكيف <م> أعمدة فو مع خط ثابت -height وصورة خلفية تكرار أسلوب و<م> لى العناصر)

إذا كنت متأكد انها IE فقط ثم جافا سكريبت يمكن أن يبنى في لCSS مع <وأ href = "http://msdn.microsoft.com/en- لنا / مكتبة / ms537634.aspx "يختلط =" نوفولو noreferrer "> الملكية ديناميكية تعيين عرض طفل لتتناسب مع الوالدين على النحو التالي:

ul,li {float:left;}
ul {overflow:hidden;}
li {clear:left;width:expression(this.parentNode.offsetWidth);}