Content редактируемые инлайн DIV перемещается при пустой

Question

Вот пример: http://jsfiddle.net/nojv18wf/

<div> 
    <div class="display">Blah blah blah?</div> 
    <div class="input" contenteditable="true"></div> 
</div> 

<br /><br /><br /><br /> 

<div> 
    <div class="display">Blah blah blah?</div> 
    <div class="input border" contenteditable="true"></div> 
</div> 

Часы, где каретка идет, когда вы нажимаете на «бла-бла-бла».

В первом примере он переходит на до того, как blah blah blah, пока вы не наберете текст, а затем появится в нужном месте.

Во втором примере, с границей, он работает так, как должен.

Как я могу заставить каретку появиться в нужном месте без добавления уродливой границы?

EDIT: Это, похоже, происходит только в Chrome, оно нормально работает в Firefox и даже в IE.

EDIT 2: Причина, по которой я использую inline, заключается в том, что текст обертывается, как будто это было гладкое продолжение, а не весь блок. E.G: http://jsfiddle.net/khkurs5t/

Answer 1

Вы всегда можете добавить прозрачную границу к вашему input, Fiddle

border: solid 1px transparent; 

Это будет держать ваш текст на одной и той же линии, как вы упомянули, а также.

ПРИМЕЧАНИЕ * Угадайте, кто не любит сохранять текст на одной строке, хотя ... Да ... IE Но этот метод работает во всех других браузерах. Удачи мой друг!

Answer 2

Вы можете использовать макет inline-block вместе с min-width.

.input{ display: inline-block; min-width: 1px;} 

JSFiddle