我正在使用 CSS 将small
段落中的元素绝对定位到所述段落的旁边。那里没有问题。
small
然后,我希望使用 javascript 在元素之前插入一个链接的上标数字。
基本上,改变这个:
<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
标签是最终罪魁祸首。这些浏览器似乎将其视为块级元素。在样式规则中添加 adisplay: inline
似乎并不能解决这个问题。
奇怪的是,如果我将生成的源代码保存为静态 HTML 文档,它在相同的浏览器中显示得很好。
据我所知,这个问题是由锚标签通过 JS/JQuery 动态插入引起的。
这是我创建的 jsFiddle 测试页面:
http://jsfiddle.net/D6SMH/show/
这是一个删除了脚本并将 HTML 替换为后者生成的 HTML 的版本:
http://jsfiddle.net/VJT2N/show/
两者在 Firefox、Chrome 和 Safari 中的显示相同。只有后一种硬编码版本在 IE 违规者中正确显示。