CSS3魔法堂：禁止用戶改變textarea大小

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　

  在FF、Chrome和Safari下默認時允許用戶以拖拽形式來改變textarea大小，這不僅與IE下textarea的行為特點有異，而且textarea的大小變化會撐大其父節點從而破壞整體布局。

 

二、原因　　　　　　　　　　　　　　　　　　　　　　　　　　 

通過調用 window.getComputedStyle(textarea元素, null).resize 返回both，我們可以知道原來是resize樣式屬性搞的鬼。

 

三、CSS3屬性──resize　　　　　　　　　　　　　　　　　　　　

用於設置UserAgent調整元素尺寸的機制，就是說設置用戶能否和如何自行改變元素尺寸。

值范圍

none：不允許UserAgent調整元素尺寸;

both ：允許UserAgent調整元素水平、垂直方向的尺寸;

vertical：允許UserAgent調整元素垂直方向的尺寸;

horizontal：允許UserAgent調整元素水平方向的尺寸;

inherit ：繼承父元素

 

在FF、Chrome和Safari下

對於div來說resize屬性值時inherit（其實就是none），而對於textarea而言默認值為both。

 

四、解決辦法　　　　　　　　　　　　　　　　　　　　　　　　

  為textarea設置 resize: none

 

尊重原創，轉載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/3940728.html ^_^肥仔John