如何在IE中的textarea上使右侧和底部css属性起作用？ （IE9及以下） [英] How to make right and bottom css properties work on a textarea in IE? (IE9 and below)

问题描述

设置我的textarea的css样式底部：5px;将不会按预期工作，意味着不会改变它的高度..就像在chrome中一样。

Setting my textarea's css style bottom: 5px; will not work as expected, means will not change it's height.. like would do in chrome.

推荐答案

假设你是谈论这样的事情： http://jsfiddle.net/thirtydot/44pwh/

Assuming that you're talking about something like this: 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中运行。

..there's no way to make it work in IE9.

事实上，它仅适用于WebKit浏览器。

In fact, it only works in WebKit browsers.

这可能与 textarea 成为替换元素，WebKit以不同方式处理其他布局引擎。

It's probably something to do with textarea being a replaced element, and WebKit handling it differently to other layout engines.

作为解决方法，您可以申请 top / 吧 / bottom / left 到包装器 div ，然后在 div 中添加 textarea 。然后，添加：

As a workaround, you can apply top/right/bottom/left to a wrapper div, then add the textarea inside that div. Then, add this:

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 完美契合 - 没有它，默认填充 / border 会使 textarea 略大于理想值。

box-sizing: border-box is to make the textarea fit perfectly - without it, the default padding/border would make the textarea slightly larger than ideal.

这篇关于如何在IE中的textarea上使右侧和底部css属性起作用？ （IE9及以下）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！