Как заставить работать свойства right и bottom css на текстовой области в IE? (IE9 и ниже)

Question

Настройка стиля CSS для моего textarea: 5px; не будет работать должным образом, значит, не изменит его высоту .. как было бы в chrome.

Answer 1

Предполагая, что вы говорите о чем-то вроде этого: http://jsfiddle.net/thirtydot/44pwh/

<div style="position:relative; width:360px; height:180px">
    <textarea style="position:absolute; top:0; left:0; right:0; bottom:0"></textarea>
</div>

.. нет способа заставить его работать в IE9.

На самом деле он работает только в браузерах WebKit.

Вероятно, это связано с тем, что textarea является замененным элементом , а WebKit обрабатывает его иначе, чем другие механизмы компоновки.

---

В качестве обходного пути вы можете применить top / right / bottom / left к оболочке div, а затем добавить textarea внутри этого div. Затем добавьте это:

textarea {
    width: 100%;
    height: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

http://jsfiddle.net/thirtydot/44pwh/1/

box-sizing: border-box - чтобы идеально подходить textarea - без него значение по умолчанию padding / border сделает textarea немного больше идеального.