Question

你知道吗，为什么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

Answer 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>

Contenteditable不适用于Opera中的表

1 个答案: