在IE中使用占位符的ContentEditable Div中焦点位置错误

Question

我有一个内容可编辑的Div与一个占位符。

请参阅此fiddle。

[contenteditable=true]:empty:before {
  content: attr(placeholder);
}

#myDiv {
  border: 1px dashed #AAA;
  width: 290px;
  padding: 5px;
  text-align: center;
}

<div id="myDiv" contenteditable="true" placeholder="Enter text here..."></div>

问题是： 当我们在Chrome中打开这个小提琴并单击div时，我们将光标焦点放在div的中心位置。见图。下面：

但是当我们在IE中做同样的事情时，我们会在地方持有者的最后得到关注。见下图。

我也希望将光标聚焦在IE中心。

Answer 1

我不确定为什么会发生这种情况，但您可以将position: absolute;应用于您的伪元素以及一些额外的规则来调整div的大小。这在IE11中适用于我。

fiddle

示例：

＆＃13;

＆＃13;

[contenteditable=true] {
  position: relative;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  margin: auto;
}

#myDiv {
  border: 1px dashed #AAA;
  width: 290px;
  padding: 5px;
  text-align: center;
  height: 16px;
}

＆＃13;

<div id="myDiv" contenteditable="true" placeholder="Enter text here..."></div>

＆＃13;

＆＃13;

＆＃13;