Contenteditable 不适用于 Opera 中的表格答案

【问题标题】：Contenteditable doesn't work with table in OperaContenteditable 不适用于 Opera 中的表格
【发布时间】：2014-01-13 11:36:06
【问题描述】：

你知道，为什么 contenteditable=true 在 Opera 中不起作用？

<!DOCTYPE html>
<html>
  <body>
    <table>
      <tr>
        <td contenteditable="true">This is a paragraph. It is editable.</td>
      </tr>
    </table>
  </body>
</html>

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_contenteditable

Opera 版本：12.16，构建 1860 平台：Mac OS 10.9.1

【问题讨论】：

caniuse.com/#feat=contenteditable: “...实现方式在编辑某些元素的方式上存在很大差异。”和“在 Internet Explorer 中 contenteditable 不能应用于 TABLE、COL、@987654327 @、TBODY、TD、TFOOT、TH、THEAD、TR 元素直接..."

标签： html opera contenteditable

【解决方案1】：

支持目前相当不稳定。浏览器还没有完全赶上。

在完全支持之前，最简单的解决方案是在单元格内放置 DIV 或 SPAN 并使其可编辑。请参阅the related MSDN article 上的“备注”部分。

您还应该添加min-height 样式规则。如果你忽略它，如果单元格中没有内容，它将缩小到 0px，并且用户将很难点击它来获取焦点。不过，制表位应该可以正常工作。

这是我用来调试的东西：

TD > DIV[contenteditable="true"] {
    border: 1px dashed blue;
    min-height: 1em;
}

您的 DOM 结构将如下所示：

<!DOCTYPE html>
<html>
  <body>
    <table>
      <tr>
        <td>
            <div contenteditable="true">This is a paragraph. It is editable.</div>
        </td>
      </tr>
    </table>
  </body>
</html>

【讨论】：