• 全部
  • 问答

处于非 100% 宽的 div 里面的 100% 宽表单输入的时候自动变宽怎么办?

2ndboy 2006-11-27 08:56:21
比如如下代码:

<div style="margin-right:200px">
<textarea style="width:100%"></textarea>
</div>

在 IE 里面,在 textarea 里一输入东西 textarea 的宽度就会自己变宽,<input type="text"/> 也一样。FireFox 里面就没这个问题,怎么解决呢?谢谢!
...全文
244 点赞 收藏 6
写回复
6 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
2ndboy 2006-11-29
谢谢 zeroleonhart!按你说的方法可以解决:

<div id="aa" style="margin-right:200px">
<textarea id="bb"></textarea>
</div>

<script type="text/javascript">
var aa = document.getElementById( 'aa' );
var bb = document.getElementById( 'bb' );
bb.style.width = ( aa.offsetWidth - 2 ) + "px";
</script>

不过也不是完美的解决方案,因为这么设置以后浏览器窗口大小改变后网页布局不会跟着变了,就算处理 div 的 onResize 也不行。只能通过脚本解决吗?纯 HTML + CSS 不能避免这个 IE 的 bug?

谢谢 zeroleonhart,明天还没有其它方案的话就结贴。
回复
ImN1 2006-11-29
div本身没有定义宽度的话子级的width是不起作用的
建议div就应该使用100%或相关定义
回复
zeroleonhart 2006-11-28
用js来使输入框的绝对宽度和div的宽度一样就可以了
回复
2ndboy 2006-11-27
to chengxiaofeng:
那个 div 不能固定,再外面的容器也不能固定,因为这是一个两栏布局的一部分,定死宽度的话这个两栏布局就不能自适应浏览器窗口了。

能不能给个不定死宽度的解决方案?
回复
chengxiaofeng 2006-11-27
<body margin-right:200px>
<div style="margin-right:200px">
<textarea style="width:100%"></textarea>
</div>
</body>
回复
chengxiaofeng 2006-11-27
因为你外面没有DIV固定,所以就会自己变宽
回复
相关推荐
2019最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)
近期总结一一些面试题 都是企业的面试题笔记题 感觉薪资10k下的都会出笔试题 特别高的薪资都是直接技术面试或者是 现场编程 总结很多人的面试题,后期会对于单个知识点再说笔记详细讲解。 ...
前端面试题
前端面试题汇总 ... 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 21 ... 21 Quirks模式是什么?...div+css的布局较table布局有什么优点? 22 img的alt与title有何异同? strong与em的异同? 22 你能...
前端面试题(持续更新中)
永远不会被释放,所以我们应该在必要的时候,及时释放这个闭包函数本 2.数据类型 基本数据类型:String,Boolean,number,Null,undefined,object, 字符串 布尔 数值 空值 未定义 对象 引用数据类型:Objec...
C#基础教程-c#实例教程,适合初学者
C#基础教程-c#实例教程,适合初学者。 第一章 C#语言基础 本章介绍C#语言的基础知识,希望具有C语言的读者能够基本掌握C#语言,并以此为基础,能够进一步学习用C#语言编写window应用程序和Web应用程序。...
HTML标签常用标签
1、 注释标签  注释标签用于在源代码中插入注释。注释不会显示在浏览器中。 2、  声明标签 声明必须是 HTML 文档的第一行,位于 标签之前。 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用...包含所有
20120最新Web前端经典面试试题及答案-史上最全前端面试题汇总(含答案)
1.一个200*200的div在不同分辨率屏幕上下左右居中,用css实现 div { position:absolute; width:200px; height:200px; top:50%; left:50%; margin-left:-100px; height:-100px; z-index:1000; } 2.写一个左中右...
【问题归纳】前端开发问题集 | css 设置div宽高比1:2
总想沉淀开发过程中遇到的问题,避免重复的查询。希望这本问题集能减少你在遇到问题时在搜索引擎中漫无目的且耗时地搜索花费的时间,提升开发效率! 处理二进制数据流并下载为excel文件(含乱码问题) ...
【input 标签的 type 属性详解】
input 输入标签的type 属性1.1 input 标签的 type类型 属性的常用属性值⑴ type="text"⑵ type="button"⑶ type="checkbox"⑷ type="file"⑸ type="hidden"⑹ type="image"⑺ type="password"⑻ type="radio"⑼ ...
html%3ca%3e的下划线,【译】这44个 CSS 精选知识点你能在30 秒内给出答案吗?
写在前面一个周五的晚上,闲来无事整理下自己的 github(经常做收藏党),今天打算都过一遍,发现一个star很高的项目,里面有大量的 CSS 片段,而且标题很诱人,然后又花了将近1个小时从头到尾过了一遍,其中一些是...
div+css布局的问题
1、常用那几种浏览器测试?有哪些内核(Layout Engine)?  答: (1)浏览器:IE,Chrome,FireFox,Safari,Opera。  (2)内核:Trident,Gecko,Presto,Webkit。 ... (1)行内元素:会...
看不完的那种!前端170面试题+答案学习整理(良心制作)
哪吒人生信条:如果你所学的东西 处于喜欢 才会有强大的动力支撑。 把你的前端拿捏得死死的,每天学习得爽爽的,关注这个不一样的程序员,如果你所学的东西 处于喜欢 才会有强大的动力支撑。 感谢不负每一份热爱...
div+css 知识点
day02 网页组成:结构(Structure),表现(Presentation),行为(Behavior) hyper text markup language 超文本标记语言 htnl cascading style sheets 层叠样式表 声明文档类型 代码编码格式 ...
Bootstrap学习笔记——表单
<!doctype html> 基础表单 <bo
CSS表格及表单美化
CSS表格及表单美化 有效的传递页面信息 使用CSS美化过的页面文本,使页面漂亮、美观,吸引用户 可以很好的突出页面的主题内容,使用户第一眼可以看到页面主要内容 具有良好的用户体验 <span> 标签的作用 能让...
笔记摘抄div+css
回到上一个网页 ——修改placeholder提示的样式: 1.除IE外通用写法 ...给定宽度(width:100px)、 超出隐藏(overflow:hidden)、 强制在同一行显示(white-space: nowrap)、 省略号(text-overflow:...
web前端面试100
1.一些开放性题目1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势。2.项目介绍3.如何看待前端开发?4.平时是如何学习前端开发的?5.未来三到五年的规划是怎样的?...
输入URL到页面成功展示到浏览器的过程?
主干流程梳理: 知识体系中,最重要的是骨架,脉络。有了骨架后,才方便填充细节。所以,先梳理下主干流程: 从浏览器接收到url到开启网络请求线程(这一部分涉及浏览器的机制以及进程与线程之间的关系) ...
一个合格的初级前端工程师需要掌握的模块笔记
文章目录一个合格的初级前端工程师需要掌握的模块笔记前言Web模块html基本结构标签属性事件属性文本标签多媒体标签列表表格表单标签其他语义化标签网页结构模块划分CSS代码语法CSS 放置位置CSS的继承选择器的种类...
2020年 前端面试题整理汇总100题【整理】
1.一些开放性题目 1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势。 2.项目介绍 3.如何看待前端开发? 4.平时是如何学习前端开发的?...5.未来三到五年的规划是怎样的?...
输入URL到显示网页,都经历了什么?
转自http://www.dailichun.com/2018/03/12/whenyouenteraurl.html前言见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正。为什么要梳理这篇文章?最近恰好被问到这方面的问题,尝试整理后发现,这道题...
输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!
前言见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正。为什么要梳理这篇文章?最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目。...
selenium2自动化测试实战--基于Python语言
自动化测试基础 一、 软件测试分类 1.1 根据项目流程阶段划分软件测试 1.1.1 单元测试  单元测试(或模块测试)是对程序中的单个子程序或具有独立功能的代码段进行测试的过程。 1.1.2 集成测试  集成测试是...
运维开发工程师(BKDS)理论基础
运维开发工程师(BKDS)理论基础 蓝鲸SaaS开发框架包含哪些Web防护策略? A. 防 CSRF 攻击 B. 防 XSS 攻击 C. 防 SQL注入 D. 没有Web安全防护 正确答案:A,B,C 社区版如何将第三方系统放在工作台中使用?...A....B....C....A.
bootstrap使用教程学习笔记1——表单
什么是bootstrap? ... 1.安装 下载地址:3.3.7版本 防止以上链接失效,附上网盘地址 这是预编译版本的,解压后目录如下: ...也可以选择Download Source:下载源代码。但如果使用的是未编译的源代码,需要编译 LESS...
DIV+CSS学习笔记总结篇
DIV+CSS学习笔记总结篇 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求...
输入URL到页面渲染出来的过程?(搭建知识体系)
原文链接:...)对浏览器模型有整体概念,知道浏览器是多进程的,浏览器内核是多线程的,清楚进程与线程之间得区别,以及输入url后会开一个新的网络线程对从开启网络线程到发出一个完整的http请求中...
B 端设计师必不可少的表单设计(上)
本文将我自己踩过的坑整理出来,目的是为了帮助那些刚迈入职场的设计师,对表单能有一个更好的了解,从而避免在工作中进入误区。本文共计11000个字,阅读大约需要30分钟,请合理安排时间,看得快...
一个合格的中级前端工程师需要掌握的技能笔记(上)
Github来源:一个合格的中级前端工程师需要掌握的技能 | 求星星 ✨ | 给个❤️关注,❤️点赞,❤️鼓励一下作者大家好,我是魔王哪吒,很高兴认识你~~哪吒人生信条:如果你所学的东西 ...
软件测试原来是这样学的?后悔现在才知道的python自动化测试测试全基础教学(全干货,建议收藏)
文章目录一、 手工测试与自动化测试二、自动化测试语言的选择三、python webdriver 环境搭建 一、 手工测试与自动化测试 关于软件测试领域名词颇多,发现有许多测试新手混淆概念,从不同的角度可以将软件测试有不同...
Control-flow Enforcement Technology Preview 2.0 spec
Intel CFI技术手册。 Intel CFI从CPU层次检测和防止ROP/JOP攻击,主要包含shadow stack和endbranch两项技术。 比软件层面的防御方法,如微软的CFG,更有效。目前Intel最新编译器已经支持此技术
发帖
CSS
创建于2007-09-28

6.0w+

社区成员

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
申请成为版主
帖子事件
创建了帖子
2006-11-27 08:56
社区公告
暂无公告