IE7의 목록 항목에 3px 추가 바닥 패딩 방지 방법

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 해킹이 포함되지 않는 솔루션을 찾고 있습니다. 많은 경우에 포함 된 요소를 제공하면 3px 추가 높이 문제의 대부분을 해결하면이 코드에 대해서는 파악할 수 없었습니다.

내 앱에서, 나는 잘 작동하지만 옳지 않은 것처럼 보이지 않는 IE7 (4px가 아닌 1px)에 다른 마진 바닥을 적용하게되었습니다 ....

여기 테스트 페이지

여기에 라이브 앱

설명 된 표준 수정 사항 중 일부를 시도했습니다 456 Berea st & 이 페이지, 그러나 내 예제에 잘못 적용하거나 코드가 구성되는 방식에 다른 것입니다. 이 레이아웃을 달성하는 수정 또는 기타 방법에 대한 제안이 있습니까?

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 요소의 높이를 지정한 다음 수직-균형을 추가하여 하단을 추가하여 코드가 다음과 같습니다.

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

IE 6 & 7에서 나를 위해 일합니다