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

时间 2019-11-17

原文原文链接

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

<!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>