我正在尝试使用jQuery格式化代码块，特别是在<code>标签内添加一个<pre>标签：

$(document).ready(function() {
   $("code").wrapInner("<pre></pre>");
});

Firefox正确应用了格式设置，但是IE将整个代码块放在一行上。如果我添加警报

alert($("code").html());

我看到IE在pre标签中插入了一些其他文本：

<PRE jQuery1218834632572="null">

如果我重新加载页面，jQuery后面的数字将更改。

如果我使用wrap()而不是wrapInner()来将<pre>包装在<code>标签之外，则IE和Firefox都可以正确处理它。但是<pre>也不应该在<code>内部工作吗？

我更喜欢使用wrapInner()，因为然后可以将CSS类添加到<pre>标记中以处理所有格式，但是如果使用wrap()，则必须将页面格式化CSS放入标签中的<pre>标签和文本/字体格式，或者Firefox和IE都令人窒息。没什么大不了的，但是我想让它尽可能简单。

有人遇到过这种情况么？我想念什么吗？

解决方案

回答

我们正在使用最新的jQuery吗？
如果我们尝试怎么办

$("code").wrapInner(document.createElement("pre"));

是更好还是我们得到了相同的结果？

回答

顺便说一句，我不知道是否相关，但是代码标签中的pre标签不会在严格模式下验证。

回答

那就是block和inline元素之间的区别。 " pre"是一个块级元素。将其放在只能包含内联内容的code标记内是非法的。

因为浏览器必须支持他们在真实网络上可能发现的任何令人讨厌的标记汤，所以Firefox会尝试按照意思做。 IE恰好以不同的方式处理它，这在规范中是可以的；这种情况下的行为是不确定的，因为它永远不会发生。

• 我们可以将code元素替换为pre吗？ (由于块/内联问题，从技术上讲，仅当元素位于具有"流"内容的元素内时，该功能才起作用，但是浏览器仍然可以执行我们想要的操作。)
• 如果我们想要pre的行为，为什么它首先是一个code元素？
• 我们还可以通过CSSwhite-space：pre赋予code元素pre的空白保留功能，但显然IE 6仅在严格模式下才具备这种功能。

回答

如markpasc所述，HTML不允许CODE元素内的PRE元素。最好的解决方案是将HTML代码更改为在代码块的HTML中直接使用<pre> <code>(这意味着包含代码的预格式化块)。