Текст, торчащий в Bootstrap 3 input-goup textarea

Question

Используя Bootstrap 3 группы ввода, я пытаюсь иметь текстовое поле с несколькими строками. Проблема в том, что в IE 9 (не проверял другие версии IE) текст торчит из области textarea, когда есть входная группа-аддон слева от текстового поля.

Проверить jsfiddle:

jsfiddle's recreation

Горизонтальные полосы прокрутки появляются - хотя текстовое поле 'заканчивается', текст переливается, как вы можете видеть на фото прилагается. Другая проблема: при использовании текстового окна с одной строкой снова появляется горизонтальная полоса прокрутки - хотя в этом случае текст не переполняется.

Любые идеи по этому вопросу? Эти проблемы не отображаются в других браузерах - это просто IE (9).

HTML-:

<div class="input-group input-group-lg"> 
    <span class="input-group-addon">Text</span> 
    <input class="form-control" placeholder="Text" id="RandomBox" /> 
</div> 

<div class="input-group input-group-lg"> 
    <span class="input-group-addon">Message</span> 
    <textarea class="form-control" cols="5" rows="10" placeholder="Message" style="height: auto;" id="MessageBox">123456789 12345678912 35 6123</textarea> 
</div> 

Answer 1

У меня была аналогичная проблема, и обнаружили, что после консультаций в ответ на this question помог. В принципе добавьте класс «pull-left» в ваше текстовое поле, изменив class="form-control" на class="form-control pull-left".