文本在Bootstrap 3输入组textarea中突出显示

Question

使用Bootstrap 3输入组，我正在尝试使用多行的textarea。问题是，在IE 9中（尚未检查其他IE版本），当textarea左侧有一个输入组插件时，文本会突出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>

<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的答案提供建议有帮助。基本上，将“向左拉”类添加到您的textarea，将class="form-control"更改为class="form-control pull-left"。