IE8/IE7/IE6 seem to treat anchor tag inserted via JQuery as a block level element
I'm using CSS to absolutely position `small` elements from within paragraphs off to the side of said paragraphs. No issues there.

I'm then looking to use javascript to, among other things, insert a linked superscript digit before the `small` element.

Basically, changing this:

    <p>
        <small> ... </small>
    </p>

to this:

    <p>
        <sup>
            <a href="#article1_note1">1</a>
        </sup>
        <small class="note" id="article1_note1"> ... </small>
    </p>

This is where the layout breaks in IE8 or earlier. (It may, for all I know, break in IE9 as well, but I only have XP boxes available for testing.)

Process of elimination suggests that the `a` tag is the ultimate culprit. These browsers seem like they're treating it as a block level element. Adding a `display: inline` to the style rules didn't seem to fix this.

The odd thing is that, if I take the generated source and save it as a static HTML document, it displays just fine in those same browsers.

As far as I can tell, then, the issue is caused by the anchor tag's dynamic insertion via JS/JQuery.

Here's a jsFiddle test page I've created:

http://jsfiddle.net/D6SMH/show/

Here's a version with the script removed and the HTML replaced by the generated HTML of the latter:

http://jsfiddle.net/VJT2N/show/

Both display identically in Firefox, Chrome and Safari. Only the latter, hard-coded version displays properly in the IE offenders.
IE8/IE7/IE6 seem to treat anchor tag inserted via JQuery as a block level element
===

I'm using CSS to absolutely position `small` elements from within paragraphs off to the side of said paragraphs. No issues there.

I'm then looking to use javascript to, among other things, insert a linked superscript digit before the `small` element.

Basically, changing this:

    <p>
        <small> ... </small>
    </p>

to this:

    <p>
        <sup>
            <a href="#article1_note1">1</a>
        </sup>
        <small class="note" id="article1_note1"> ... </small>
    </p>

This is where the layout breaks in IE8 or earlier. (It may, for all I know, break in IE9 as well, but I only have XP boxes available for testing.)

Process of elimination suggests that the `a` tag is the ultimate culprit. These browsers seem like they're treating it as a block level element. Adding a `display: inline` to the style rules didn't seem to fix this.

The odd thing is that, if I take the generated source and save it as a static HTML document, it displays just fine in those same browsers.

As far as I can tell, then, the issue is caused by the anchor tag's dynamic insertion via JS/JQuery.

Here's a jsFiddle test page I've created:

http://jsfiddle.net/D6SMH/show/

Here's a version with the script removed and the HTML replaced by the generated HTML of the latter:

http://jsfiddle.net/VJT2N/show/

Both display identically in Firefox, Chrome and Safari. Only the latter, hard-coded version displays properly in the IE offenders.