为什么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属性。