一、前言                          

在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

CSS3魔法堂:禁止用户改变textarea大小的更多相关文章

  1. CSS3魔法堂:说说Multi-column Layout

    前言  是否记得<读者文摘>中那一篇篇优美感人的文章呢?那除了文章内容外,还记得那报刊.杂志独有的多栏布局吗?  当我们希望将报刊.杂志中的阅读体验迁移到网页上时,最简单直接的方式就是采用 ...

  2. CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  3. CSS3魔法堂:认识@font-face和Font Icon

    一.前言 过去我们总通过图片来美化站点的LOGO.标题.图标等,而现在我们可以通过@font-face获取另一种更灵活的美化方式. 二.看看例子 /* 定义 */ @font-face { font- ...

  4. CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解[转]

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  5. CSS3魔法堂:背景渐变(Gradient)

    一.前言 很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认知这一特性,以下笔记以便日后查阅. 二.CSS3的各种背景渐变   1. 线性渐变 示例——七彩虹 ...

  6. CSS3禁止用户选中文字——user-select: none;

    需求:现在有一个需求是在移动端让你禁止用户选中文字,你会怎么做呢?如下图    解决方法:使用CSS3新增属性 user-select: none;   -webkit-user-select:non ...

  7. windows sdk编程禁止改变窗体大小

    #include <windows.h> /*消息处理函数声明*/ HRESULT CALLBACK WindowProc(HWND hwnd, UINT message, WPARAM ...

  8. Visual Studio 2015 改变窗体图标 & 任意位置打开窗体 & 禁止鼠标改动窗体大小

    1.改变窗体图标 先把图标放到项目文件夹中,然后点击窗体属性的ICON添加即可. 参考:https://www.cnblogs.com/yangxuli/p/8075484.html?tdsource ...

  9. HTML5魔法堂:全面理解Drag & Drop API

    一.前言    在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面 ...

随机推荐

  1. HttpURLConnection GET/POST写法

    现在虽然HttpClient很好使,但也有人在用最原生的HttpURLConnection, 记录一下,备忘之. public class HttpUrlConnect { //get请求 publi ...

  2. ASP.NET弹出显示ex.Message异常信息 存在换行符和回车符处理办法。

    1.把ex.Message换成任意字符串,检验在catch语句块中可以用Response.Write方法显示对话框.结果显示成功,说明问题就出在ex.Message上. 2.在程序中下断点,可以看到e ...

  3. Python - 升级所有已安装的第三方包

    我们有时候需要把系统上已经安装的第三方的packages升级到最新版.但是easy_install和pip都没有直接的命令可以使用. 我们可以是用如下命令来查看系统上面哪些包过期了. pip list ...

  4. javascript - encodeURI和encodeURIComponent的区别

    这两个函数功能上面比较接近,但是有一些区别. encodeURI:不会进行编码的字符有82个 :!,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@,_,~,0-9,a-z, ...

  5. 博为iHospital-HIS医院信息系统产品系列

    博为软件iHospital-HIS产品系列式面向大中型医院应用的完整医院流程信息化产品,覆盖了医院主要的业务流程,管理职能,和病人在医院诊疗的各个环节.将医院流程的优化与软件系统完美结合,为建立数字化 ...

  6. 增加Xss过滤步骤

    1.往项目web.xml中增加以下的代码: <!-- xss param过滤开始 bgy 2014-12-25 --> <filter>  <filter-name> ...

  7. [原创]实现android知乎、一览等的开场动画图片放大效果

    代码下载地址: https://github.com/Carbs0126/AutoZoomInImageView 知乎等app的开场动画为:一张图片被显示到屏幕的正中央,并充满整个屏幕,过一小段时间后 ...

  8. ORA-12571: TNS:packet writer failure

    ORA-12571:TNS:包复写器失效 2007-05-28 22:04 ORA-12571:TNS:包复写器失效 近日一直在做Oracle数据库的搭建(入门),在搭建过程中遇到“ORA-12571 ...

  9. aspcms常见问题解决方案

    1.产品详细页读取多张产品图片(栏目类型:产品){aspcms:cimages count=16 contentid=[content:id]}<li onmouseover="sho ...

  10. iis 访问网站需要进行身份验证

    今天网站输入域名访问的时候提示需要输入账号密码,这是权限出了问题,百度了一下,解决了,分享一下: 1.登陆远程,右键我的电脑->管理->本地用户和组->用户,里面有一个IUSR_WD ...