5

我认为我在这里做错了，我希望 textarea 在每一侧都比父 div 小 10px，但事实并非如此，它太小了：

<html>
  <div style="position: absolute; left: 10px; top: 10px; width:50%; height: 50%; border: 1px solid #000000;">
    <textarea style="position: absolute; left: 10px; top: 10px; bottom: 10px; right: 10px; border: 1px solid #FF0000; resize:none;"></textarea>
  </div>
</html>

jsfiddle：http: //jsfiddle.net/2a7LR/1/

为什么会这样？我怎样才能使它适合从父 div 的每一侧小 10 像素？

它仅在 chrome/safari 中正确显示，但在其他所有浏览器（firefox、opera、IE8）中都错误

4

3 回答 3

10

http://jsfiddle.net/2a7LR/5/为你调整了一些 CSS。基本上使用width: 100%; height: 100%，将 移到10px容器的padding属性，然后添加box-sizing到 textarea 以使大小考虑边框。

于 2012-05-25T08:59:46.670 回答
2 
<html>
<div style="position: absolute; left: 10px; top: 10px; width:50%; height: 50%; border: 1px solid #000000;">
    <textarea style="position: relative; margin: 10px 10px 10px 10px; width:90%; height: 90%"></textarea>
</div>
</html>​

这应该适合你。文本区域在绝对 div 内可以是相对的。您只需要使用边距而不是顶部和左侧来定位它。

干杯，费德

编辑：并且还注意到您没有在文本区域中设置任何宽度和高度，因此不知道它的大小 - 它只是放置了默认值。

于 2012-05-25T09:00:57.123 回答
-2

http://jsfiddle.net/EzJ8G/1/ 替换textarea中的样式并添加padding:10px；

于 2012-05-25T08:49:52.603 回答