信息动态

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

技术资讯

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>

上一篇：dede调用全站相关文章 的方法
下一篇：如何拷贝加密pdf内容

近期更新

延伸阅读

解决方案

轮胎行业网站设计解决方案 机械行业网站设计解决方案 房地产行业网站设计解决方案 科技企业网站设计解决方案 电子家电网站设计解决方案 食品行业网站设计解决方案 集团公司网站设计解决方案 企事业单位网站设计解决方案 外贸行业网站设计解决方案 健身运动网站设计解决方案 美容与化妆品网站设计解决方案 建筑设计行业网站设计解决方案 物流行业网站设计解决方案

TAGS关键字

青岛flash网站 轮胎网站设计 苹果系统 空白和简洁的设计 微信小程序 青岛网站案例 企业网站 营销型网站建设 网站策划 网站设计趋势 网站交互设计 IT资讯 官网建设 青岛轮胎网站设计公司 青岛IT资讯 网站设计 网站开发 图形网格 青岛网站建设公司哪家好 力图数字科技 css 网站建设的步骤有哪些 手机网站 青岛网页设计 青岛网络公司 网站规划 php程序 力图 手机网站建设 响应式设计

青岛力图数字科技有限公司 2008- 版权所有 鲁ICP备09005893号-6 | 网站地图

青岛网站建设 青岛网站设计 青岛网站制作


0532-85810878 473587358 扫码添加微信

扫码添加微信

 扫码关注公众号

官方公众号