爲什麼IE10顯示風格不同於其他瀏覽器

Question

我有以下HTML：

<td class="tdGo" style="background-color: #0000FF;"> 
    <img src="theImages/search_go.png" id="imgGo" class="imgGo" /> 
</td> 

CSS：

td.tdGo { 
    padding-right: 24px; 
    text-align: right; 
} 
.imgGo { 
    cursor: pointer; 
} 

JQuery的：

$('.imgGo').each(function() { 
    var std = $(this).attr("src"); 
    var hover = std.replace("theImages/search_go.png", "theImages/search_go_rollover.png"); 
    $(this) 
     .clone() 
     .insertAfter(this) 
     .attr('src',hover) 
     .removeClass('imgGo') 
     .siblings() 
     .css({position:'absolute'}); 
    $(this) 
     .mouseenter(function() { 
      $(this).stop().fadeTo(250, 0); 
     }) 
     .mouseleave(function() { 
      $(this).stop().fadeTo(250, 1); 
     }); 
}); 

IE10：

IE8：

FF /鉻：

出於某種原因，在IE10中的圖像出現在兩個不同的地方，我似乎無法找出原因。任何幫助表示讚賞。

這就是DEV工具被示出：

Answer 1

IE10是唯一一個此正確呈現：與position:absolute元素是從流動的，因此當確定不向text-align:right響應它的位置。

考慮使用這個CSS：

td.tdGo { 
    text-align:right; 
    padding-right:24px; 
    position:relative; 
} 
.imgGoRollover { 
    position:absolute; 
    right:24px; 
} 

此外，要知道，你的jQuery是創建具有重複的ID元素 - 確保你從克隆的元素中刪除ID屬性。