IE中奇怪的TextArea行为

Question

我一直在一个站点上工作，该站点包含一个供用户插入注释的文本区域，并且所有内容在除IE之外的所有浏览器上的提交的详细信息页面上看起来都很好。我得到以下屏幕截图中显示的以下问题：

有关如何解决此问题的任何线索？我在使用一些自定义CSS样式的bootstrap，但对文本区域的影响并不大。似乎正在插入新行，或IE认为textarea小于应有的值。这是文本区域的代码：

<div class="form-group">
        @Html.LabelFor(model => model.Comments, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextAreaFor(model => model.Comments, 5, 50, htmlAttributes: new { @class = "form-control", @readonly = true })
        </div>
 </div>

其他所有内容看起来都不错，并且屏幕上还有其他文本区域没有此问题。这是同一页面上没有问题的文本区域的屏幕截图：

代码如下：

<div class="form-group">
    @Html.LabelFor(model => model.Complaint.Comments, htmlAttributes: new { @class = "control-label col-md-3" })
    <div class="col-md-9">
        @Html.TextAreaFor(model => model.Complaint.Comments, 5, 50, htmlAttributes: new { @class = "form-control", @readonly = true })
    </div>
</div>

CSS提供如​​下：

/*! CSS Used
textarea{margin:0;font-family:inherit;font-size:100%;}
textarea{overflow:auto;vertical-align:top;}
@media print{
*{color:#000!important;text-shadow:none!important;background:transparent!important;box-shadow:none!important;}
}
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
textarea{font-family:inherit;font-size:inherit;line-height:inherit;}
textarea{background-image:none;}
.form-control:-moz-placeholder{color:#999999;}
.form-control::-moz-placeholder{color:#999999;}
.form-control:-ms-input-placeholder{color:#999999;}
.form-control::-webkit-input-placeholder{color:#999999;}
.form-control{display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.428571429;color:#555555;vertical-align:middle;background-color:#ffffff;border:1px solid #cccccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);-webkit-transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;}
.form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);}
.form-control[readonly]{cursor:not-allowed;background-color:#eeeeee;}
textarea.form-control{height:auto;}
textarea{max-width:280px;}

感谢您为这个有趣的问题提供的帮助。

Answer 1

在第一个代码示例中，尝试将<div class="col-md-10">更改为<div class="col-md-9">。我观察到这是每个示例中文本框的父<div>的区别。

Answer 2

尝试：

 HtmlElement selectType = gDoc.GetElementById("xxx");
 selectType.InvokeMember("change");

Answer 3

So, I found the issue, at one point of time the table had a char(100) type for the comments field meaning it padded XX number of characters. Apparently, IE and several other text editors have a limit on how many characters per line and thus it was breaking the content up into two lines. Once the EF had been updated to no longer have a fixed length for that field and all trailing spaces removed this worked perfectly.

Very strange issue, but thank you everyone for your help!