textarea和input宽度在不同浏览器下的兼容方法

       一般情况下,textarea和input在IE下的宽度如果相同的话,那在其他浏览器下就会出现有长有短,这就让网站设计中的表单效果美观度降低。虽然这两个表单元素十分常用,但由于其在各浏览器下表现略有不同,我们很难把握好宽度的设置,更别说宽度自适应100%啦。利用hack解决问题比较的不心安,通过下面方法可以很好的实现且跨浏览器兼容。用到两个无意义的标签实属无奈了,暂时没找到更好的解决办法。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>宽度自适应的input和textarea</title>
<style>
body {
	text-align: center;
}

.wrap {
	padding: 20px;
	width: 600px;
	background-color: #000;
	margin: 0 auto;
}

.fluid-input {
	display: inline-block;
	width: 100%;
	overflow: hidden;
}

.fluid-input-inner {
	display: block;
	padding-right: 10px; #
	zoom: 1;
}

.fluid-input .text,.fluid-input textarea {
	border: 2px #ccc solid;
	padding: 3px;
	width: 100%;
}

.fluid-input textarea {
	height: 300px;
}
</style>
</head>
<body>
	<h2>宽度自适应的input和textarea</h2>
	<div class="wrap">
		<div style=" width:100%; overflow:hidden;">
			<div style="margin-right:10px; *height:1%;">
				<input class="text" type="text"
					style="width:100%; padding:3px; border:2px solid #ccc;">
			</div>
		</div>
		<div style=" width:100%; overflow:hidden;">
			<div style="margin-right:10px; *height:1%;">
				<textarea
					style="width:100%; padding:3px; border:2px solid #ccc; height:300px;"></textarea>
			</div>
		</div>
	</div>
</body>
</html>


你可能感兴趣的:(input,浏览器兼容,textarea,宽度兼容)