تعويم الصورة مباشرة داخل Li of OL، النص اليسار، يعمل في Chrome، وليس IE / FF

Question

أرغب في الحصول على قائمة أمر بها النص على اليسار وصورة لكل لى داخله على يمين لي. لذلك طرحت الصورة إلى اليمين وتضع الصورة بشكل صحيح على اليمين والنص على اليسار، ولكن الصورة هي 14 بكسل منخفضة جدا في IE و FF. كروم يفعل ذلك بشكل صحيح. يبدو أن هذا لي أن أكون IE و FF وضع التعويم الخارجي أو أسفل كل لي بدلا من الداخل حيث يجب أن يكون (مثل الكروم). إذا قمت بضبط الموضع -14px (أعلى) ل IE و FF، فإنه يعمل بشكل جيد بالنسبة لهم، ولكن بعد ذلك افسدت الكروم. 14px هو ارتفاع كل لي وهذا هو السبب في أن هذه الخدعة تعمل.

لا أريد متصفح واحد اختراق ما لم تكن هناك حاجة ماسة (أي إزاحة -14px ل IE / FF وأخبر 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 id=##>Name <a href="#" rel="##" class="removeTeam"><img src="/images/button-x.png" alt="Remove Name"></a></li>

راجع أول لى ليس لديه صورة ل ff / IE لأنه أدناه (حيث يبدو أنه من أجل # 2) و Image # 25 خارج أسفل القائمة.

أريد كل 3 أن تبدو وكأنها الكروم. هناك بعض جافا سكريبت إنتاج OL / LIS، و class=removeTeam هو فقط ل jQuery الإجراءات. توجد هذه القائمة ضمن JQuery Sortable، ولدي اختيار قائمة معطلة مع JQuery (.disableSelection();). لا أعتقد أن هذا له علاقة بجائق أو جافا سكريبت، فقط 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>