IE8 / IE7 / IE6似乎将通过JQuery插入的锚标记视为块级元素

IE8/IE7/IE6 seem to treat anchor tag inserted via JQuery as a block level element

本文关键字：元素 JQuery IE6 IE7 IE8 插入      更新时间：2023-09-26

我正在使用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标签是最终的罪魁祸首。这些浏览器似乎将其视为块级元素。在样式规则中添加display: inline似乎并不能解决这个问题。

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

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

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

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

下面是一个删除脚本并将 HTML 替换为后者生成的 HTML 的版本：

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

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

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

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

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

这可能是因为您的 CSS 声明垂直对齐：super;为了处理此请求，它可能会将您的标签转换为块元素。您可能希望在条件样式表中查看另一种解决方法(负边距顶部等(。

相关文章：