IE7의 목록 항목에 3px 추가 바닥 패딩 방지 방법
-
10-07-2019 - |
문제
악명 높은 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 & 이 페이지, 그러나 내 예제에 잘못 적용하거나 코드가 구성되는 방식에 다른 것입니다. 이 레이아웃을 달성하는 수정 또는 기타 방법에 대한 제안이 있습니까?
해결책
다음을 시도하십시오.
<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임을 인정하지만 문제를 깔끔하게 회피합니다.
다른 팁
이 코드로 시도하지는 않았지만 Li 요소의 높이를 지정한 다음 수직-균형을 추가하여 하단을 추가하여 코드가 다음과 같습니다.
div.test ul li { height: 20px; vertical-align: bottom;}
IE 6 & 7에서 나를 위해 일합니다