Windows Phone 8.1 IE11解析問題與嵌套列表和contenteditable div

可能有人已經面臨這樣的奇怪問題。如果你能給我任何有用的建議，我將不勝感激。Windows Phone 8.1 IE11解析問題與嵌套列表和contenteditable div

SPOILER：工作html小提琴位於問題的結尾。

任務：

我正在開發基於<div contenteditable>只是一個所見即所得的編輯器。用戶的主要功能之一是使用嵌套列表。

PREPARE

我在編輯器中，與從服務器接收並投入<div>在innerHTML的清單工作：

HTML：

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

瀏覽器：

一個

兩個

在現實生活中，innerHTML的，從服務器接收到的，將是內聯，當然：

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

假設，即我需要刪除信e word One。我在脫口而出之後插入了脫字符，並像往常一樣按Backspace鍵。

問題，在IE瀏覽器的移動

在Chrome中，Safari瀏覽器，桌面IE11一切都會好的 - 信Ë將被刪除，和尖保持在正確的位置。但在Windows Phone IE中，插入符號將跳轉到列表中的下一個位置 - 前兩個。

對不起，巨大的解釋，我把這個HTML對谷歌託管，這樣你就可以用自己的Windows Phone努力嘗試刪除信é與退格鍵：

<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

PS：是的，我注意到儘管這兩個div的「平等」，但IE在第一個變體中的每個單詞之後增加了一個空格。可能是它可以是一個解決方法，如果服務器將在每行添加&nbsp。

更新：此問題僅與Windows Phone IE有關。

來源

2016-03-11 Panda

正如快速的解決方法 - 在屬於每個<li>元件text的末尾添加<br>含有嵌套<ul>。

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

來源

2016-03-11 11:08:09 Panda

Windows Phone 8.1 IE11解析問題與嵌套列表和contenteditable div

回答

相關問題