Why IE10 shows style differently than other browsers

Question

I have the following 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/Chrome:

For some reason in IE10 the images appear in two different place and I can't seem to figure out why. Any help is appreciated.

This is what the DEV tool is showing:

Answer 1

IE10 is the only one rendering this correctly: An element with position:absolute is out of the flow, and therefore does not respond to text-align:right when determining its position.

Consider using this CSS:

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

Also, be aware that your jQuery is creating elements with duplicate IDs - make sure you remove the ID attribute from the cloned element.