css - form表单的边框问题
本文介绍了css - form表单的边框问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
使用form表单,设置宽度时遇到困难
<form action="" class="form" >
<input class="text" type="text" value="自然堂亮点水立方"/>
<input class="sub" type="submit" value="搜索"/>
</form>
header .form {width: 629px;height: 36px;border: 2px solid #C40000;border-right: none;margin-bottom: 6px;}
header .form .text{width: 494px;height: 36px;border:none;}
header .form .sub{width:131px;height: 36px;background-color:#C40000 ;color: #fff;border:none;}
为什么form的宽度不于下面两个的和,能解释一下吗?
解决方案
这个样式为了避免兼容性问题才这样的。。
主要就是你的.form有每边2个像素的边框border: 2px solid #C40000;
而这个在不同浏览器下是不同的,有的是在里面,那样加起来 494+131+2*2=629正好填满,而在中间和外面那个,就会出来1~2个像素的差异,总之不会错位。
这篇关于css - form表单的边框问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文