在線編輯器中跳轉內容

Question

我正在嘗試創建一個簡單的內聯編輯器小部件。我想要的是轉到編輯模式，而不是被迫跳轉文本。這裏是一個fiddle的例子。 當我們點擊文本時，它將移動到編輯模式，但即使在編輯和顯示模式下將內容設置爲相同的填充和邊距，內容'測試'也會跳轉。

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; 
}