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

1、前言　　　　　　　　　　　　　　　　　　　　　　　　　　

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

 

2、緣由　　　　　　　　　　　　　　　　　　　　　　　　　　 

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

 

3、CSS3屬性──resize　　　　　　　　　　　　　　　　　　　　

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

值範圍

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

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

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

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

inherit ：繼承父元素

 

在FF、Chrome和Safari下

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

 

4、解決辦法　　　　　　　　　　　　　　　　　　　　　　　　

  爲textarea設置 resize: none

 

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