浏览器相关问题使用Showdown.js渲染WMD？

Question

这应该很容易(至少没有其他人似乎有类似的问题),但我无法看到它在哪里打破.

我将Markdown'ed文本存储在我的应用程序页面上输入的数据库中.使用WMD输入文本,实时预览看起来正确.

在另一页上,我正在检索降价文本并使用Showdown.js将其转换回HTML客户端进行显示.

假设我有这样的文字:

The quick **brown** fox jumped over the *lazy* dogs.

1. one
1. two 
4. three
17. four

我在我的jQuery文档就绪事件中使用这段Javascript来转换它:

var sd = new Attacklab.showdown.converter();
$(".ClassOfThingsIWantConverted").each(function() {
   this.innerHTML = sd.makeHtml($(this).html());
}

我怀疑这是我的问题所在,但它几乎可以工作.

在FireFox中,我得到了我的预期:

快速的棕色狐狸跳过懒狗.

1. 一
2. 二
3. 三
4. 四

但在IE(7和6)中,我得到了这个:

快速的棕色狐狸跳过懒狗.1.一个1.两个4.三个17.四个

显然,IE正在剥离我的降价代码中断并将它们转换为空格.当我查看原始代码的视图源(在脚本运行之前)时,容器DIV中有中断.

我究竟做错了什么？

UPDATE

它是由IE innerHTML/innerText"quirk"引起的,我之前应该在ASP.Net页面上使用数据绑定控件提到这一点 - 否则显然有很多不同的解决方法.

Answer 1

导致问题的是Internet Explorer innerHTML/innerText"quirk".对于未标记为的所有元素<pre>,IE会在将它们移交给Javascript之前为它们删除空格.

我不能只在<pre>标签中留下带有降价文本的元素,因为Showdown生成的HTML不会正确显示.解决方案是暂时将其包装在一个<pre>然后更改它.

ASP.Net代码现在看起来像这样:

<div class="ClassOfThingsIWantConverted">
    <pre><%# Eval("markdowntext") %></pre>
</div>

而Javascript/jQuery看起来像这样:

var sd = new Attacklab.showdown.converter();
$(".ClassOfThingsIWantConverted").each(function() {
   this.html(sd.makeHtml($("pre",this).text()));
}

现在在两个浏览器上运行正常...