1

我正在使用 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 违规者中正确显示。

4

2 回答 2

2

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

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

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

于 2012-05-23T19:56:29.740 回答
0

这可能是因为您的 CSS 声明为 vertical-align: super; 为了处理这个请求，它可能会将您的标签转换为块元素。您可能希望在条件样式表中查看另一种解决方法（负边距顶部等）。

于 2012-05-23T20:17:50.787 回答