كيفية منع 3PX الحشو السفلي اضافية على عناصر القائمة في IE7

Question

ولدي صفحة حيث يتم تقديم مساحة إضافية 3PX الشائنة العمودي (تحت كل عنصر li) في IE7 على جميع قائمتي العناصر. لدي حالة معينة حيث أحتاج نص وضعه تماما داخل li، بحيث يمكن تعيين الحاوية الخاصة به إلى عرض أصغر، والنص يمتد إلى أبعد من الحاوية. هنا هو رمز أنا باستخدام:

<style type="text/css">
 div { width: 160px; font: 8pt arial,helvetica,sans-serif; border: 1px solid #999; }
  div ul { margin: 0; padding: 0; list-style: none; }
   div ul li { width: 30px; height: 20px; margin: 0 0 4px; padding: 0; background-color: #c00; }
    div ul li a { display: block; line-height: 20px; color: #000; text-decoration: none; }
     div ul li a em { position: absolute; margin-left: 5px; }
</style>

<div>
 <ul>
  <li><a href="#"><em>#1: premature brake wear</em></a></li>
  <li><a href="#"><em>#2: squeaky brakes</em></a></li>
  <li><a href="#"><em>#3: bad gas mileage</em></a></li>
 </ul>
</div>

وأنا أبحث عن حل لا ينطوي على CSS الإختراق IE7 محددة، فقط من أجل CSS نقاء و. لقد قرأت أنه في الكثير من الحالات، وإعطاء العناصر التي تحتوي على hasLayout يحل معظم هذه القضايا ارتفاع اضافي 3PX، ولكن لم أكن قادرا على أنها من أصل الرقم لهذا الرمز.

في بلدي التطبيق، انتهى بي الأمر تطبيق مختلف هامش أسفل لIE7 (1PX بدلا من 4PX) الذي يعمل بشكل جيد ولكن فقط لا يبدو الحق ....

صفحة الاختبار هنا

لايف التطبيق هنا

ولقد حاول بعض الإصلاحات القياسية الموضحة في 456 بيريا سانت و هذه الصفحة ، ولكن إما أنا تطبيقها بشكل غير صحيح إلى بلدي على سبيل المثال، أو أنه شيء آخر في طريق قانون بلدي هو منظم. أي اقتراحات لإصلاحات أو بطرق أخرى لإنجاز هذا التخطيط؟

Answer 1

وحاول القيام بما يلي:

<style type="text/css">
    div.test { width: 160px; font: 8pt arial,helvetica,sans-serif; border: 1px solid #999; overflow:hidden; }
    div.test ul { margin: 0; padding: 0; list-style: none;}
    div.test ul li { margin: 0 0 4px; }
    div.test ul li a { display: inline-block; }
    div.test ul li a { display: block; padding: 0 5px; line-height: 20px; color: #000; text-decoration: none; position: relative; z-index: 2; }
    div.test ul li b {   background-color: #c00; height: 20px; width: 20px; position: absolute; display: block; z-index: 1; }
</style>

<div class="test">
    <ul>
        <li><b></b><a href="#"><em>#1: premature brake wear</em></a></li>
        <li><b></b><a href="#"><em>#2: squeaky brakes</em></a></li>
        <li><b></b><a href="#"><em>#3: bad gas mileage</em></a></li>
    </ul>
</div>

وأنا لا يمكن أن يحل المشكلة التي كانت تواجه أي أنظف من ما لديك بالفعل (الإصلاح الآخر هو لتعويم وLI واضحة لهم) ولكن، وأنا مما يتيح لك طريقة بديلة للقيام بذلك. أعترف انها أنظف HTML، لكنه بدقة تجنب هذه المشكلة.

Answer 2

وأنا لم أحاول ذلك مع هذا الرمز، ولكني تحديد ارتفاع في العناصر لي، ثم أضاف العمودي محاذاة: أسفل، لذلك لن يكون رمز:

div.test ul li { height: 20px; vertical-align: bottom;}

ويعمل بالنسبة لي في كل أي 6 و 7