Почему текстовое поле не изменяет размер всего div в IE?Хром в порядке

Question

А проблема изменения размера IE !?Код довольно прост: у меня есть div и я хочу текстовое поле, которое на 100% состоит из DIV.Он должен показывать красную линию div (если я использую высоту: 100%, ширину: 100%, он стирает мою границу :-().

HTML:

<div>
    <textarea></textarea>
</div>

Css:

div{

    width:500px;
    height:500px; 
    border:solid 1px red;
    padding:1px;
    position:absolute;
    top:100px;
}

textarea{
    position:absolute;
    top:0px;
    bottom:0px;
    right:0px;
    left:0px;
}

Я надеюсь, что вы, ребята, имеете представление. DTD в этом примере является HTML Strict. Пример кода: http://jsfiddle.net/QJYuz/

Я пытаюсь найти причинупочему тоже. Пожалуйста, укажите любые ссылки на блоги / спецификации почему возникает эта проблема.

Answer 1

IE не поддерживает настройку одновременно left и right (ни top, ни bottom).Вместо этого попробуйте установить width и height на 100% (но в этом случае вам понадобится удалить отступы и границы):

textarea{
   position:absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
}

Answer 2

Один метод, который хорошо выглядит в обоих случаях: http://jsfiddle.net/QJYuz/6/

Мои изменения в textarea:

textarea{
    position:absolute;
    top:0px;
    left:0px;
    width: 99%;
    height: 98%;
    overflow: auto;
}

Я просто установил width и height на 99% и 98%.Хорошо выглядит в обоих случаях и сохраняет границу.Я также вставил overflow: auto, чтобы избавиться от уродливой серой полосы прокрутки в IE8, пока вам на самом деле не понадобится полоса прокрутки.

Answer 3

Попробуйте сделать

textarea {
    height: 100%;
    width: 100%;
}

вместо этого. Хотя некоторые браузеры поддерживают одновременную настройку верхних / нижних / левых / правых, это не стандарт.