IE7のリストアイテムで3pxの余分な下部パディングを防ぐ方法

Question

悪名高い3pxの余分な垂直方向のスペース（各 li 要素の下）がIE7ですべてのリストアイテムにレンダリングされているページがあります。特定の状況では、テキストを li 内に絶対に配置する必要があります。そのため、コンテナーをより小さな幅に設定するには、＆amp;テキストはコンテナを超えています。私が使用しているコードは次のとおりです。

<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に別のマージン底（4pxではなく1px）を適用することになりました。これは正常に動作しますが、正しく見えません。...

テストページはこちら

ライブアプリはこちら

456 Berea St に記載されている標準的な修正をいくつか試しました。 ＆amp; このページが、例に誤って適用している、または何かそれ以外の場合は、コードの構造が異なります。このレイアウトを達成するための修正またはその他の方法に関する提案はありますか？

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

このコードでは試していませんが、li要素に高さを指定してから、vertical-align：bottomを追加したため、コードは次のようになります。

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

6と8の両方で動作します。 7