OL의 LI 내에서 Float Image Orgen, Text Left, IE/FF가 아닌 Chrome에서 작동합니다.

Question

나는 왼쪽에 텍스트가 있고 Li의 오른쪽에있는 각 li에 대한 이미지가있는 순서 목록을 갖고 싶습니다. 그래서 이미지를 오른쪽에 떠 다니면서 이미지를 오른쪽에 올바르게 놓고 왼쪽의 텍스트를 올바르게 놓지만 이미지는 14 픽셀이 IE와 FF에서 너무 낮습니다. 크롬은 제대로합니다. 이것은 나에게 IE와 FF가 chrome과 같은 내부 대신 각 Li 외부 또는 아래에 플로트를 넣는 것으로 보인다. IE 및 FF의 위치 -14px (UP) 위치를 조정하면 잘 작동하지만 Chrome이 엉망입니다. 14px는 각 Li의 높이이므로 그 트릭이 작동하는 이유입니다.

절대적으로 필요하지 않는 한 단일 브라우저 해킹을 원하지 않습니다 (즉, IE/FF에 대해 -14px 오프셋을 수행하고 Chrome에게 무시하도록 지시합니다).

#top25list{
       width:185px;
       cursor:n-resize;
       list-style:
       decimal inside;
       padding:0;
       margin:0
}
#top25list li{
       margin:0;
       padding:0 3px;
       background-color:#FFF;
       border-top:1px solid #990100;
       border-bottom:1px solid #990100
}
#top25list img{
       border:none;
       height:13px;
       width:13px;
       float:right
}
#top25list li:hover{
       background-color:#990100;
       color:#FFF
}

Li의 특별한 것은 없습니다.

<li id=##>Name <a href="#" rel="##" class="removeTeam"><img src="/images/button-x.png" alt="Remove Name"></a></li>

첫 번째 LI에는 FF/IE에 대한 이미지가 없습니다 ( #2 용으로 보이는 곳)이기 때문에 #25 이미지가 목록의 맨 아래에 있기 때문입니다.

나는 모두 3이 크롬처럼 보이기를 원합니다. OL/LIS를 제작하는 JavaScript가 있습니다. class=removeTeam jQuery 동작을위한 것입니다. 이 목록은 jQuery 정렬 내에 있으며 jQuery로 목록을 사용하지 않습니다..disableSelection();). 나는 이것이 jQuery 또는 JavaScript, 간단한 CSS와 관련이 없다고 생각합니다.

Answer 1

IE와 Firefox가 공유하는 버그입니다. 주변에서 작업하려면 이미지를 라인의 플로화되지 않은 텍스트 앞에 이동해야합니다.

<li id=##>
   <a href="#" rel="##" class="removeTeam">
      <img src="/images/button-x.png" alt="Remove Name">
   </a> 

   Name
</li>

Answer 2

HTML을 변경할 수 없다면 플로트 대신 포지셔닝을 시도 할 수 있습니다.

#top25list li{
  margin:0;
  padding:0 3px 10px 3px; /* add padding-right to make room for the image */
  background-color:#FFF;
  border-top:1px solid #990100;
  border-bottom:1px solid #990100;
  position: relative; /* for img to have position  */
}

#top25list img{
  border:none;
  height:13px;
  width:13px;
  position: absolute;
  top: 0;  
  right: 0; 
}

나는 이것을 테스트하지 않았다. 내가 틀렸다면 알려주세요.

Answer 3

목록 스타일 : 내부가 엉망입니다.

아래는 작동하는 코드입니다. 플로트를 #Top25List A로 옮기고 이름 앞에서 옮겼습니다.

#top25list{
       width:185px;
       cursor:n-resize;
       padding:0;
       margin:0
}
#top25list li{
       margin:0;
       padding:0 3px;
       background-color:#FFF;
       border-top:1px solid #990100;
       border-bottom:1px solid #990100
}
#top25list a{float:right;}
#top25list img{
       border:none;
       height:13px;
       width:13px;
}
#top25list li:hover{
       background-color:#990100;
       color:#FFF
}

<ul id="top25list">
    <li><a href="#" rel="##" class="removeTeam"><img src="/images/button-x.png" alt="Remove Name"></a>Name </li>
    <li><a href="#" rel="##" class="removeTeam"><img src="/images/button-x.png" alt="Remove Name"></a>Name </li>
    <li><a href="#" rel="##" class="removeTeam"><img src="/images/button-x.png" alt="Remove Name"></a>Name </li>
    <li><a href="#" rel="##" class="removeTeam"><img src="/images/button-x.png" alt="Remove Name"></a>Name </li>
</ul>