IE7에서 아이콘 목록 메뉴가 제대로 정렬되지 않습니다.

Question

IE7의 CSS에서 정렬 문제가 있습니다. 나는이 아이콘을 텍스트 메뉴로 만들려고하는데 파이어 폭스와 IE 8에서는 잘 작동하지만 IE7에서는 플로트가 발생하지 않는다. 왜 이런 형식의 html 코드를 선택 했는가? 목록을 가리키면 호버 효과가 생기고 이미지 대신 이미지 스프라이트를 사용하는 것이다. 누군가 내가 잘못 가고있는 곳을 바로 잡아 주실 수 있습니까?

<style type="text/css"> 
.designDetailLinks { 
display:block; float:right; position:relative; 
} 
.designDetailLinks li { 
display:block; float:left; margin:0 0 0 0; font-size:92%; width:auto; 
} 
.designDetailLinks .editCTO { 
display:block; padding:26px 0 0 0;color:#575656; width:40px; margin:0 auto; text-align:center; 
background:url(../images/icons.gif) no-repeat 0 -2229px; 
} 
.designDetailLinks .editCTO:hover { 
display:block; color:#1d8e3f; 
background:url(../images/icons.gif) no-repeat 0 -2270px; 
} 
.designDetailLinks .BOM { 
display:block; padding:26px 0 0 0; color:#575656; width:40px; margin:0 auto; text-align:center; 
background:url(../images/icons.gif) no-repeat 0 -2313px; 
} 
.designDetailLinks .BOM:hover { 
display:block; color:#1d8e3f; 
background:url(../images/icons.gif) no-repeat 0 -2313px; 
} 
.designDetailLinks strong { 
display:block; text-align:center; clear:left; 
} 
</style> 

HTML 코드 : 다음과 같이 HTML과 CSS 코드는

CSS 코드 ..입니다

<div class="designDetailLinks"> 
<ul> 
<li><a href="#" class="BOM"></a><strong>Edit BOM</strong></li> 
<li><a href="#" class="editCTO"></a><strong>Edit CTO </strong></li> 
</ul> 
</div> 

Answer 1

어떤 플로트 얘기하고, 왜 좌우 부동?

이전 의견에 따르면, HTML과 CSS를 단순화하려는 경향이 있습니다. 모든 다른 규칙이 주어지면 어떤 일이 벌어지기는 어렵습니다. 일부는 중복되는 것처럼 보입니다. HTML에 대한

,이 같은 (그들은 고유 식별자있어 이후 사실, 여기에 클래스가 아마 ID가 있어야합니다) 사용할 수 있습니다

<ul class="designDetailLinks"> 
    <li><a href="#" class="BOM">Edit BOM</a></li> 
    <li><a href="#" class="editCTO">Edit CTO</a></li> 
</ul> 

... 또는 그냥 넣어 앵커 요소를 div 안에 있습니다 (목록 순수 주의자들을 불쾌하게 만들지 만).

그런 다음 CSS는 다음과 같이 보일 수있다 : 우리가 그것을 디버깅하는

<style type="text/css"> 
.designDetailLinks li a { 
background:url(../images/icons.gif) no-repeat; 
display:block; 
font-size:90%; /* sensible to stick with multiples of 5 */ 
font-weight: bold; 
padding: 26px 0 0 0; 
text-align: center; 
width: 40px; 
} 
.designDetailLinks .editCTO { 
background-position: 0 -2229px; 
} 
.designDetailLinks .editCTO:hover { 
background-position: 0 -2270px; 
} 
.designDetailLinks .BOM { 
background-position: 0 -2313px; 
} 
.designDetailLinks .BOM:hover { 
background-position: 0 -2313px; /* BTW: is this pixel value wrong? */ 
} 
</style>