`
yxc_gdut
  • 浏览: 97422 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

textarea IE6/7中设置百分比高度失效

    博客分类:
  • css
 
阅读更多

        大家好,我想让textarea自适应容器的高度,设置height:100%

        结果其他浏览器能自适应高度,就IE6/7不能,

        望高手指点

        

<!DOCTYPE html>
<html>
  <head>
    <title>textarea.html</title>
    <meta http-equiv="content-type" content="text/html; charset=GB18030"/>
    <style type="text/css">
    	.div{width:200px;height:200px;border:1px solid #999;padding:10px;float:left}
    	.textarea{height:100%;width:100%;overflow:auto;border:1px solid #3164ac;
    		zoom:1;
    		display:block;/*都不能让ie6、7的height:100%起作用*/
    	}
    </style>
  </head>
  <body>
	<div class="div">
	    <textarea rows="0" cols="0" class="textarea">textarea</textarea>
    </div>
	<div class="div">
	    <span class="textarea">span</span>
    </div>
	<div class="div">
	    <img class="textarea" alt="img"></img>
    </div>
	<div class="div">
	    <input class="textarea" value="input"></input>
    </div>
  </body>
</html>

   其他浏览器显示

 IE6/7显示



 

    input和textarea无效,其他inline,inline-blcok元素都有效。

    如果设置height:100px,IE6/7有效,只是设置百分比无效。

奇怪

 

  • 大小: 32.4 KB
  • 大小: 36.4 KB
分享到:
评论

相关推荐

    Vue下textarea文本框根据内容自适应改变高度

    一种可能的解决方案是使用CSS的`resize`属性,将其设置为`none`,以禁用用户的缩放功能,这在某些版本的IE中可以帮助解决问题。 ```css :auto-height-textarea textarea { resize: none; } ``` 现在,我们的Vue...

    定宽的textarea根据内容自动调整高度

    在这个示例中,`autoResizeTextarea`函数首先将`textarea`的高度重置为自动,然后将其高度设置为自身的滚动高度(`scrollHeight`),这是一个包含了可见和不可见部分的高度值。`addEventListener`方法则用于监听`...

    textarea 输入框自适应高度

    4. **设置新高度**:比较textarea当前的高度和测量得到的高度,取较大者作为新的高度,并将其应用到textarea的样式中。确保设置了`overflow-y: hidden`以隐藏滚动条。 5. **防止无限增长**:为了防止textarea无限...

    jquery----TextArea高度自适应

    - 如果不是IE浏览器,先将TextArea的高度设为0,然后获取`scrollHeight`属性,即包含滚动条在内的元素实际高度。 - 根据`minHeight`和`maxHeight`限制最终的高度值,确保不会超出预设范围。 - 最后,设置TextArea的...

    textarea高度自适应js代码

    6. **防止无限循环**:为了防止因高度调整触发新的输入事件,形成无限循环,需要正确地设置事件处理逻辑,例如使用`setTimeout`进行延迟处理,或者在处理函数中添加标记来跳过不必要的调整。 `README.md` 文件通常...

    flex3 textArea 高度自适应

    在标题“flex3 textArea 高度自适应”中提到的问题,就是如何实现这样一个功能,让`TextArea`的大小随着其内容的增加而自动调整。 在描述中提到,已经有一个自定义的解决方案,可以依据文本内容自动调整`TextArea`...

    在textarea光标处插入文本

    ### 在Textarea光标处插入...本文详细介绍了如何在`textarea`的光标位置插入文本的方法,包括IE和非IE浏览器的兼容性处理。通过分析提供的代码示例,我们不仅了解了其实现原理,还学习了如何在实际项目中应用这些知识。

    textarea自适应高度插件textareaAutoHeight.zip

    否则IE(6|7|8)下插件失效.1. 加载jQuery库(1.4 )2. 加载textareaAutoHeight.js3. 使用以下接口调用插件:$('textarea').tah({ moreSpace:15, //输入框底部预留的空白, 默认15, 单位像素 maxHeight:600, //指定...

    textarea自适应高度标签,去除难看的滚动条

    这段代码会在用户在`textarea`中输入文字时,自动调整其高度为内容的实际高度,从而避免了固定高度导致的显示问题。 至于去除滚动条,可以使用CSS样式来实现。对于水平滚动条,我们可以通过设置`overflow-x: hidden...

    固定textarea文本域尺寸

    在你的案例中,只需将 `resize` 设置为 `none`,即可阻止用户改变 `textarea` 的大小。相关的CSS代码如下: ```css textarea { resize: none; } ``` 应用了这段CSS后,textarea元素将无法通过拖动边角来改变尺寸...

    关于Textarea的换行问题

    TextArea的换行行为主要受制于其自身的属性设置和外部调用的方法。从给定的代码片段来看,有两个TextArea实例:`text1`和`text2`。`text1`被配置为仅具有垂直滚动条(`TextArea.SCROLLBARS_VERTICAL_ONLY`),而`...

    textarea

    在本文中,我们将详细介绍如何使`textarea`随内容的高度固定而自动增宽,以及宽度固定时如何自动增高,并对`wrap`属性的几种设置进行详细解释。 ### 自动增宽与自动增高 在默认情况下,`textarea`元素的尺寸是固定...

    TextareaAutosize根据内容的大小自动调整Textarea

    `TextareaAutosize`是一种JavaScript解决方案,它允许`Textarea`的高度根据用户输入的内容动态调整,从而确保文本框始终能完整显示所有文本,无需手动设置固定的高度。这个特性极大地提升了用户体验,因为它避免了...

    textarea添加背景图片并控制定位

    在网页设计中,文本区域(`textarea`)通常用于用户输入多行文本,但默认情况下,`textarea`元素仅提供基本的文本输入功能,没有太多装饰性或定制化的选项。然而,通过CSS(Cascading Style Sheets)我们可以扩展其...

    IE6-9placeholder、textarea-maxlength的修复;实时用户输入捕捉

    IE6-9 input和textarea元素的placeholder(占位符)属性与textarea元素的maxlength(最大长度限制)属性的修复与所有浏览器的实时输入捕捉,仅需要提供一个元素或者元素id与实时捕捉回调函数(可选)。甚至实现了各...

    auto-textarea:基于Vue的高度自适应文本输入框

    基于Vue的高度自适应文本输入框 Use Setup (开始) Install auto-textarea (安装) $ npm install auto-textarea --save package.json "auto-textarea": "^1.3.6" Use (如何引入) // 方法一 // import with ES6 ...

    微信小程序 内容自适应textarea表单组件(autoheight_textarea)

    textarea根据内容自适应高度 组件 注意:要监听input事件改变value值 使用: &lt;autoheight_textarea value="{{value}}" placeholder="写个评论" bindinput="listenerinput"&gt;&lt;/autoheight_textarea&gt;

    textarea在文本之后获得焦点,适合ie,火狐,谷歌

    本文将详细讲解如何使`textarea`在用户填写完文本后自动获取焦点,这一功能对于提高用户体验非常关键,特别是考虑到它在不同浏览器(如IE、Firefox和Chrome)中的兼容性。 首先,我们要明白`textarea`的基本结构。...

    无滚动条Textarea自动适用高度.html

    无滚动条Textarea自动适用高度.html Textarea

    textarea框增加行号效果

    在网页开发中,`textarea` 是一个常用的元素,用于接收用户输入多行文本。然而,原始的 `textarea` 没有内置的功能来显示行号,这对于需要进行代码编辑或者查看多行文本的场景来说不够友好。为了提高用户体验,...

Global site tag (gtag.js) - Google Analytics