Странное поведение TextArea в IE

Question

Я работал над сайтом, который включает текстовую область для комментариев, которые пользователь может вставить, и все выглядит отлично на странице сведений о представлении во всех браузерах, кроме IE.Я получаю следующую проблему, представленную на снимке экрана ниже:

Есть какие-либо подсказки, как решить эту проблему?Я использую начальную загрузку с некоторыми пользовательскими стилями CSS, но на текстовую область это мало влияет.Кажется, что вставляется новая строка, или IE думает, что текстовое поле меньше, чем должно быть.Вот код для текстовой области:

<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

попробуйте это:

@Html.TextAreaFor(model => model.Complaint.Comments, htmlAttributes: new { @class = "form-control", @readonly = true, @rows = 5, @cols = 50 })

Answer 2

Итак, я обнаружил проблему: в какой-то момент таблица имела тип char (100) для поля комментариев, означающего, что оно дополняет число символов XX.По-видимому, IE и некоторые другие текстовые редакторы имеют ограничение на количество символов в строке, и поэтому оно разбивало содержимое на две строки.После того, как EF был обновлен и теперь не имеет фиксированной длины для этого поля, а все конечные пробелы удалены, это работает отлично.

Очень странная проблема, но спасибо всем за помощь!

Answer 3

В первом примере кода попробуйте изменить <div class="col-md-10"> на <div class="col-md-9">.Я заметил, что это разница в родительском <div> текстового поля в каждом примере.