Question

我有一些html如下（对于IE9）：

<div contenteditable="true">
   Some editable text
   <span class="code" contenteditable="true" unselectable="on">uneditable text</span>
   more editable text
</div>

在IE9中，必须将span contenteditable设置为“true”以使跨度无法使用，而在Chrome中将其设置为“false”以使跨度不可编辑!!

但是，在IE9中，当鼠标越过跨度时，光标将显示为移动光标（交叉箭头）。光标在我的css文件中设置为'指针'，但这对IE9不起作用。

如何在IE9中将光标更改为手形或箭头？

Answer 1

以下在IE9和Chrome 38上对我都很好，跨度的内容可编辑，跨度范围内的文字不可编辑。当您将鼠标悬停在任何文本上时，光标也是您所期望的相同键入光标。

我注意到的唯一差异是，在编辑模式下，在Chrome上 span 会以蓝色突出显示。

<div>
Some NOT editable text
<span class="code" contenteditable="true">EDITABLE text</span>
more NOT editable text
</div>

例如，在Visual Stidio IDE上的HTML5验证将告诉您 contententeditable 不是元素 div 的有效属性而不可选择也不是元素 span 的有效属性。

如果您仍然遇到光标问题，请发布您的CSS。

Answer 2

使可编辑元素的子项不可编辑是一项混乱的业务，浏览器版本之间存在错误和不兼容性;见例如contenteditable=false inside contenteditable=true block is still editable in IE8和HTML contenteditable with non-editable islands

但您显然已找到使用非标准属性unselectable=on的变通方法（对于IE）。通过使元素不可选，它也使它不可编辑，因为没有办法编辑它。这个属性对IE很重要，你应该使用逻辑contenteditable=false来覆盖其他浏览器。这将使光标成为text光标，这比现在的光标更容易混淆。它可能被认为是误导性的，但IE显然IE想要使用text光标用于可编辑元素和他们的孩子（虽然不合逻辑的组合contenteditable=true unselectable=on似乎导致{{{ 1}}游标）。毕竟，它是可编辑的，包括不可编辑的岛屿，因为整个岛屿可以被移除或替换。无论如何，在这些问题中，IE忽略CSS中的move属性设置。

错误的光标显示在IE9中满足

2 个答案: