Chrome中点击contenteditable LI末尾时光标无法定位到行尾问题

问题重现 #

<ul contenteditable>
  <li>Works</li>
  <li>Doesn't
    <ul><li>Works</li></ul>
  </li>
  <li style="list-style-type: none">Works
    <ul><li>Works</li></ul>
  </li>
</ul>

问题成因 #

这是Chrome渲染引擎在处理带项目符号的嵌套列表时，对contenteditable元素的点击区域计算出现了偏差。当<li>包含子<ul>时，Chrome会错误地将项目符号与子列表之间的区域判定为子列表的点击范围，而非父<li>的文本末尾区域，导致点击后光标无法定位到父<li>的最后字符之后。禁用list-style-type后，项目符号的占位空间被移除，Chrome的点击区域计算逻辑恢复正常。

可行解决办法 #

• 自定义项目符号替代原生样式：给包含子列表的父<li>移除原生项目符号，用CSS伪元素模拟，既保留样式又规避Bug：

  li:has(ul) {
    list-style-type: none;
    position: relative;
    padding-left: 1.5em;
  }
  li:has(ul)::before {
    content: "•";
    position: absolute;
    left: 0;
    color: inherit;
  }
  

• 调整布局边界：给父<li>设置明确的display: block或宽度限制，帮助Chrome正确识别文本区域的边界。
• JS手动修正光标定位：监听点击事件，判断点击位置是否属于父<li>的文本末尾区域，手动将光标定位到正确位置：

  document.querySelector('ul[contenteditable]').addEventListener('click', e => {
    const parentLi = e.target.closest('li:has(ul)');
    if (!parentLi) return;
    
    // 简单判断点击位置是否在父li文本末尾区域
    const textNode = parentLi.firstChild;
    if (textNode && e.offsetX > textNode.textContent.length * 8) {
      const range = document.createRange();
      range.setStart(textNode, textNode.length);
      range.setEnd(textNode, textNode.length);
      const selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
      e.preventDefault();
    }
  });
  

是否需要提交Bug报告 #

需要。这个问题是Chrome独有的渲染逻辑缺陷，Firefox处理正常，且通过修改CSS属性可明确规避，说明Chrome引擎对contenteditable嵌套列表的点击区域计算存在错误。提交时需附上最小复现代码、Chrome版本信息，以及Firefox下的正常表现对比，帮助官方定位修复。

内容的提问来源于stack exchange，提问作者Basti