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>