12

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

$(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()，因为我可以在<pre>标签中添加一个 CSS 类来处理所有格式，但是如果我使用wrap()，我必须将页面格式 CSS 放在<pre>标签中，并将文本/字体格式放在<code>标签中，或者 Firefox 和 IE都窒息。没什么大不了的，但我想让它尽可能简单。

有人遇到过这种情况么？我错过了什么吗？

4

5 回答 5

12

这就是块元素和内联元素之间的区别。pre是块级元素。把它放在一个只能包含内联内容code的标签内是不合法的。

因为浏览器必须支持他们可能在真实网络上找到的任何可怕的标签汤，Firefox 试图按照你的意思去做。IE 碰巧以不同的方式处理它，这在规范中很好；这种情况下的行为是未指定的，因为它不应该发生。

  • 你可以用替换元素code吗pre？（由于块/内联问题，从技术上讲，这仅在元素位于具有“流”内容的元素内时才有效，但浏览器可能会做你想做的事。）
  • code如果您想要pre的行为，为什么它首先是一个元素？
  • 您还可以使用 CSS 赋予code元素pre的空白保留功能white-space: pre，但显然IE 6 仅在严格模式下才尊重这一点。
于 2008-08-16T04:04:09.713 回答
3

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

于 2008-08-15T21:56:18.817 回答
1

您使用的是最新的 jQuery 吗？如果你尝试怎么办

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

它更好还是你得到相同的结果？

于 2008-08-15T21:50:14.897 回答
1

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

于 2008-08-18T12:13:36.557 回答
1

您可以使用 html() 来包装它：

$('code').each(function(i,e)
{
    var self = $(e);
    self.html('<pre>' + self.html() + '</pre>');
});

如上所述，您最好更改您的 html。但是这个解决方案应该有效。

于 2011-08-18T14:21:51.453 回答