javascript - IE8/IE7/IE6 似乎将通过 JQuery 插入的 anchor 标记视为 block 级元素

Question

我正在使用 CSS 将段落内的 small 元素绝对定位到所述段落的一侧。没有问题。

然后我希望使用 javascript 在 small 元素之前插入一个链接的上标数字。

基本上，改变这个:

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

为此:

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

这是 IE8 或更早版本中布局中断的地方。 (据我所知，它也可能会在 IE9 中崩溃，但我只有 XP 框可用于测试。)

消除过程表明 a 标签是最终的罪魁祸首。这些浏览器似乎将其视为 block 级元素。向样式规则添加 display: inline 似乎无法解决此问题。

奇怪的是，如果我将生成的源代码保存为静态 HTML 文档，它在相同的浏览器中显示得很好。

据我所知，问题是由 anchor 标记通过 JS/JQuery 动态插入引起的。

这是我创建的 jsFiddle 测试页面:

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

这是一个删除了脚本并用后者生成的 HTML 替换 HTML 的版本:

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

两者在 Firefox、Chrome 和 Safari 中的显示相同。只有后者的硬编码版本才能在 IE 违规者中正确显示。

Answer 1

您需要在 jQuery 中正确关闭您的 html 标签。

notes.eq(j).before('<sup><a href="#' + noteid + '">' + (j+1) + '</a></sup>');

http://jsfiddle.net/D6SMH/2/