Windows Phone 8.1 IE11 嵌套列表和 contenteditable 解析问题 div

Question

可能有人已经遇到过这样奇怪的问题。如果您能给我一些有用的建议，我将不胜感激。

SPOILER: working html fiddle is located the end of question.

任务：

我正在开发另一个基于 <div contenteditable> 的所见即所得编辑器。用户的主要功能之一是使用嵌套列表。

准备

我在编辑器中，处理从服务器接收并放入 <div> innerHTML:

的列表

HTML:

<div contenteditable="true">
    <ul>
        <li>
            One
            <ul>
                <li>
                    Two
                </li>
            </ul>
        </li>
    </ul>
</div>

浏览器：

One

Two

在现实生活中，innerHTML，从服务器接收，当然是内联的：

<div contenteditable="true"><ul><li>One<ul><li>Two</li></ul></li></ul></div>

假设我需要删除单词 One 中的字母 e。我在单词后面加上插入符号，然后像往常一样按返回space。

IE Mobile 中的问题

在 Chrome、Safari、桌面 IE11 中一切正常 - 字母 e 将被删除，插入符号保留在正确的位置。但在 Windows Phone IE 中，插入符号将跳转到列表中的下一个位置 - 在单词 Two 之前。

抱歉解释太多，我把这个 HTML 放在 google 主机上，所以你可以尝试使用你自己的 Windows Phone 并尝试删除字母 e 后面space:

<html>
    <head>
        <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
    </head>
    <body>

        CORRECT backspace behaviour:
        <div contenteditable="true">
            <ul>
                <li>
                    One
                    <ul>
                        <li>
                            Two
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

        INCORRECT backspace behaviour:
        <div contenteditable="true">
            <ul><li>One<ul><li>Two</li></ul></li></ul>
        </div>

    </body>
</html>

http://www.googledrive.com/host/0Bw1Lu-P82yZ_TzNFa1VVTVpjbms

P.S.: 是的，我注意到尽管这两个 div 中有 "equality"，但 IE 在第一个中的每个单词后添加一个 space变种。如果服务器将在每一行中添加 &nbsp，这可能是一种解决方法。

UPDATE: this question is related to Windows Phone IE only.

Answer 1

同样快速的解决方法 - 在属于包含嵌套 <ul>.

的 <li> 的每个 text 元素的末尾添加 <br>

<ul><li>One<br><ul><li>Two<br></li></ul></li></ul>

Windows Phone 8.1 IE11 嵌套列表和 contenteditable 解析问题 div

Windows Phone 8.1 IE11 parsing issue with nested list and contenteditable div

html

internet-explorer

windows-phone-8