<textarea>标签怎样禁止拉动

最新推荐文章于 2024-08-12 09:35:23 发布

转载最新推荐文章于 2024-08-12 09:35:23 发布 · 2.1k 阅读

文章标签：

#textarea标签

CSS+DIV 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何通过设置CSS属性解决textarea在不同浏览器（如IE、Firefox）中的显示差异问题，包括自动换行、滚动条显示及调整大小等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML 标签 textarea 在大部分浏览器中只要指定行（rows）和列（cols）属性，就可以规定 textarea 的尺寸，大小就不会改变，不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同，可以拖动右下角图标改变大小。但是过分拖动大小会影响页面布局，使页面变得不美观。可以通过添加如下两个样式:1.禁用拖动2固定大小.

1：彻底禁用拖动（推荐）

resize: none;

2：只是固定大小，右下角的拖动图标仍在

width: 200px;height: 100px;max-width: 200px;max-height: 100px;

3：浏览器信息：

Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.220 Safari/535.1

---------------------------------------------textarea在IE、Firefox下统一效果的解决方案 ----------------------------------------------

如果用textarea的属性字数宽度（cols）和行数（rows）来控制textarea的大小你会发现在，在IE和FF下的每行字数和文字的行数都不相同，而且在字数不足滚动的情况下，IE是默认有滚动条的，而FF是没有滚动条的。

那如何控制textarea在IE中和FF中相同的效果呢，其实比较简单：

1、用textarea的宽度（widht）和高度（height）来定义textarea的大小；
2、让滚动条自适应：overflow-y:auto。

原文

在IE下，输入到textarea的字符长度如果超过textarea的显示宽度，会出现自动换行，如果不是以明确px限定textarea的宽度（比如使用百分比），重新显示这个textarea时会发现textarea自动变宽，以在一行内容纳所有已输入的字符。这在某写情况下会打乱页面的布局，比如这个textarea是放在一个DIV的dialogue中。

而在FF下，则不会出现自动换行的情况，FF自动为超出textarea宽度的字符增加水品滚动条以便拖动显示。即使重新显示textarea，也不会有自动变宽的变化。所以FF对于textarea的支持是不变的，从而是稳定的。