인라인 편집기에서 내용 점프

Question

간단한 인라인 편집기 위젯을 만들려고합니다. 내가 원했던 것은 편집 모드로 이동하는 것이 텍스트를 점프하지 않아도된다는 것입니다. 다음은 fiddle 예입니다. 텍스트를 클릭하면 편집 모드로 이동하지만 편집 및 표시 모드에서 동일한 여백과 여백으로 설정되어 있어도 'test'내용이 점프됩니다.

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