加拿大预测网-在线预测

信息动态

网站设计是技术与创意的完美融合!

技术资讯

textarea和input一样宽度 不同浏览器兼容方法

2013-01-15 23:26:31

一般情况下，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>

0532-85810878 473587358 扫码添加微信

加拿大预测网-在线预测:扫码添加微信

 扫码关注公众号

加拿大预测网-在线预测:官方公众号

 2054585360