Question

我在Chrome中遇到问题，其中空内容可编辑div导致有序列表中出现不需要的行间距。在Internet Explorer中查看的以下HTML按预期工作，但在Chrome中查看时，可编辑的div在空白时会移到数字下方。

<body>
  <ol>
    <li>
      <div contenteditable="true"></div>
    </li>
  </ol>
</body>

下图显示，一旦文本输入到可编辑的div中，内容就会显示在预期的位置，但是当文本为空时，内容会向下移动到1以下。

Example image

我想知道是否有CSS可以申请使空div显示在1旁边，就像在IE中一样。

这里是fiddle。

Answer 1

忘记div元素。只需将contenteditable直接添加到您的li http://jsfiddle.net/X8nLR/

<li contenteditable="true"></li>

或者，如果你真的喜欢你的div http://jsfiddle.net/QXeA3/

div {
    display: inline-block;
    width: 100%;
}

Answer 2

您可以将li的显示属性设置为block

li {
    display: block
}

编辑：上述解决方案会删除列表的小数索引。

这是另一种可能的解决方案（假设您每个列表项只有一个contenteditable项目）

li {
  position: relative;
}

li [contenteditable] {
  position: absolute;
  top: 0;
}

Answer 3

只需将display: inline;添加到CSS：

即可

<body>
<ol>
    <li>
        <div contenteditable="true" style="display: inline;"></div>
    </li>
</ol>
</body>

JSFiddle： http://jsfiddle.net/w3phy/