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