欢迎来到 jackNEss'窝窝
I like simple mind

textarea width:100% bug

2011年09月01日

textarea-width 100% bug

在我们做一些通用组件或者一些可拖拉组件的时候,需要我们对里面的各个模块进行弹性布局,在对 textarea 设置 100% 的时候,可爱的IE6 又给我们带来了惊喜了。

textarea bug影响:

看上去还是好好的,但是在ie6下面,如果你尝试在 textarea中输入字符的时候,那个 textarea 就会…

正常浏览器:

IE6:

textarea bug触发条件:

当设置 textarea css样式 width:100% 的时候,就会出发此bug。

下面是出问题代码:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>textarea width:100% bug</title>
<style type="text/css">
<!--
*{ margin:0; padding:0;}
.outset{ padding:3px; margin:50px; background:#0075a9;}
.content{ padding:0 1px;}
.textarea{ width:100%; margin:0 -1px;}
-->
</style>
</head>

<body>
<div class="outset">
	<div class="content">
	<textarea class="textarea" name="" id="" cols="30" rows="10"></textarea>
	</div>
</div>
</body>
</html>

textarea width:100% bug 解决方案:

给 textarea 外面套一层 <fieldset>标签 并设置 属性 width:100%;

.fieldset{width:100%;}

下面是修复后的代码:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>textarea width:100% bug</title>
<style type="text/css">
<!--
*{ margin:0; padding:0;}
.outset{ padding:3px; margin:50px; background:#0075a9;}
.content{ zoom:1;padding:0 1px;}
.textarea{ width:100%; margin:0 -1px;}
.fix{ width:100%;}
-->
</style>
</head>

<body>
<div class="outset">
	<div class="content">
		<blockquote class="fix">
			<textarea class="textarea" name="" id="" cols="30" rows="10"></textarea>
		</blockquote>
	</div>
</div>
</body>
</html>

(ps:细心的童鞋发现我给了textarea设置了 margin:0 -1px 属性,这个是因为给textarea 设置 width:100%;之后,他实际的宽度是 100% + 2px border 所以得将这2px消掉,所以运用了 给 textarea 父级 .content 设置 padding:0 1px 和给 .textarea 设置 margin:0 -1px 来解决)

分类bug整理
阅读 1,587
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS