css - 在内联编辑器中跳转内容

Question

我正在尝试创建一个简单的内联编辑器小部件。我想要的是进入编辑模式而不是被迫跳转文本。这是一个小提琴示例。当我们单击文本时，它会进入编辑模式，但即使在编辑和显示模式下将其设置为相同的填充和边距，内容“测试”也会跳转。

CSS：

.container .display {
  padding: 7px 13px;
  margin:0;
  font-size: 14px;
  line-height: 1.428;
  border: 1px solid transparent;
  display: block;
  vertical-align: middle;
}

.container .editor {
  padding: 7px 13px;
  margin:0;
  border: 1px solid #efefef;
  display: block;
  font-size: 14px;
  line-height: 1.428;
}

Answer 1

你应该添加字体和宽度。

在这里它不再跳了：http: //jsfiddle.net/28us9efd/4/

.container .display {
  padding: 7px 13px;
  margin:0;
  font-size: 14px;
  line-height: 1.428;
  border: 1px solid red;
  display: block;
  width: 100%;
  font-family: arial;
  vertical-align: middle;
}

.container .editor {
  padding: 7px 13px;
  margin:0;
  width: 100%;
  border: 1px solid green;
  display: block;
  font-family: arial;
  font-size: 14px;
  line-height: 1.428;
}