Google chrome ASP.NET webkit命令导致chrome中出现blockquote_Google Chrome_Webkit

Google chrome ASP.NET webkit命令导致chrome中出现blockquote

google-chrome

Google chrome ASP.NET webkit命令导致chrome中出现blockquote,google-chrome,webkit,Google Chrome,Webkit,我们正在使用ASP.NET动态创建有序和无序列表OL&UL。它工作得很好，但在chorme中，当我们使用文本缩进创建子列表时，它会创建一个BLOCKQUOTE 这是我们用来创建子列表的webkit命令 document.execCommand('indent', false, null); 这是chrome上的结果 <ol> <li><span>This is Line One</span></li> <li><b

我们正在使用ASP.NET动态创建有序和无序列表OL&UL。它工作得很好，但在chorme中，当我们使用文本缩进创建子列表时，它会创建一个BLOCKQUOTE

这是我们用来创建子列表的webkit命令

document.execCommand('indent', false, null);

这是chrome上的结果

<ol>
<li><span>This is Line One</span></li>
<li><blockquote><span>This is Line Two</span></blockquote></li>
<li><span>This is Line Three</span></li>
</ol>

这是Mozilla上的结果

<ol>
<li><span>This is Line One</span>
    <ol><li><blockquote><span>This is Line Two</span></blockquote></li></ol>
</li>
<li><span>This is Line Three</span></li>
</ol>

当我们将某些CSS属性添加到LI中的SPAN标记时，就会出现问题，例如Float:right或position:absolute 我们无法找到此问题的原因，需要您的帮助

谢谢

对于execCommand'indent'应该做什么还没有一个确切的标准，但共识似乎是：

如果所选内容在列表中，则通过将所选列表项包装在其自己的新子列表中来缩进

否则，请将所选内容换行

<>这似乎是一个合理的事情，直到你开始考虑病理病例！假设您有一个列表项，其中包含一个绝对定位的DIV，而DIV又包含多行文本。选择一行文本并单击[缩进]

您希望整个DIV缩进到它自己的新子列表中吗

或者您是否希望所选的文本行被包装，以将其与其他文本行区分开来？作为一个用户，这是我所期望的

Chrome开发者选择了这种行为

在您的例子中，没有涉及DIV元素，但是您使用CSS实现了相同的效果

我对您的问题的解决方案是暂停CSS的时间刚好足以执行缩进，然后再次启用它：

<!DOCTYPE html><html><head>
<style>
  li span { float:right }      /* Chrome has issues! */
  #editarea .nofloatspan li span { float:inherit }
  #editarea  { border:2px solid blue }
</style>
</head><body>
<div id="editarea" contenteditable="true">
<ol id="ol">
  <li><span>This is Line One</span></li>
  <li><span>This is Line Two</span></li>
  <li><span>This is Line Three</span></li>
</ol>
Not-a-list Line One<br>
Not-a-list Line Two<br>
Not-a-list Line Three<br><br>
</div><br>
<button onclick="indent()">Indent</button> &nbsp;
<button onclick="viewsource()">View Source</button><br>
<textarea id="ta" rows="20" cols="80"></textarea>
<script>
var editarea = document.getElementById("editarea");
function indent() {
  editarea.className = "nofloatspan";          // workaround for Chrome
  document.execCommand('indent', false, null);
  editarea.className = null;                  
}
function viewsource() {
  document.getElementById("ta").value=editarea.innerHTML
}
</script>
</body></html>