input text和textarea分析

学习div+css也有好一段时间了，本人立志想脱下菜鸟这顶帽子，写写心得，希望和大家一起进步！
　　当然这仅代表我个人意见，如有错，请指导，谢谢。
　　每次看到效果图的有input type=text的时候，我就会想又得花一小段时间去调试它的样式了。因为浏览器对它的解析不是完全一样，所以要做出一样的效果来又要像无头苍蝇一样撞来撞去，直到一样为止。
<input type="text" />
以上的写法，在火狐下边框里面的大小（不包括边框）为width:151px;height:19px;
ie（ie6,ie7,ie8效果一样）为width:153px;height:20px;

以下针对<input type="text" />:
input{padding:0;}时:
ff
w:151px h:17px
ie
w:151px h:18px
总结:ff的w没变，但h小了两像素；ie的w和h都小了两像素；由此猜测ff和ie都有默认的padding属性

由上推想
input{padding:1px 0;}/* ff */
* html input{padding:1px;}/* ie6 */
*+html input{padding:1px;}/* ie7 */时:
ff
w:151px h:19px;
ie
w:153px h:20px;
总结:以上效果和没设置padding时是一样，可以得出ff默认的padding:1px 0; ie默认的padding:1px;

讨论width和height
input{padding:0;width:200px;height:12px;}时:
ff
w:202px h:14px;
ie
w:202px h:14px;
input{padding:0;width:62px;height:18px;}时:
ff
w:64px h:20px;
ie
w:64px h:20px;
input{padding:0;width:150px;height:47;}时:
ff
w:152px h:49px;
ie
w:152px h:49px;
总结:由padding:0可知输入框上下左右补白都已经设为0；
1.忽略了padding后ff下的width和ie下的width是一样的
2.由数据可以得出当没有设置height时,ff的height为17px; ie的height为18px;但是设置了height后ie和ff的height是完全一致的
3.在数据中有一个疑点:为什么设置width为x;height为y时，实际值为width:(x+2)px;height:(y+2)px

关于border的影响
input{padding:0;width:100px;height:25px;border:1px solid gray;}时:
ff
w:100px h:25px;
ie
w:100px h:25px;
总结:引入border后,实际的width和height跟设置的width和height一样。在没有设置border时和设置border后的样式是不一样的，没设置border之前在input内有个类似padding:1px的属性，设置了border有关的属性后这个类似padding:1px的东西就不见了。以下我称这个东西为border-padding:1px，注意设置padding不会影响border-padding


在经过了以上的测试终于有了以下的结论：(关于<input type="text" />)
1.ff默认的padding:1px 0; ie默认的padding:1px;
2.忽略padding影响后,ff和ie的width和height是一样的
3.在没设置border之前,border-padding为1px(上下左右都有1px的补白效果，但不是padding),设置border后, 补白效果消失
4.如果想更快地写各种浏览器一样的<input type="text" />,建议重写padding和border,这样会事倍功半(经测试ie,ff,opera,safari,chrome效果一样)
例如:要<input type="text" />width:170px;height:20px;
只要这样写
input{padding:0;width:170px;height:20px;border:1px solid gray;}
够快了吧！



上面的讨论忽略了文字位置的问题，一般地，文字在<input type="text" />里面要垂直居中
下面来讨论文字在<input type="text" />垂直居中的问题
说明一下，在ff,ie下是不会垂直居中的，在opera,safari,chrome会自动垂直居中

提到垂直居中，第一个会想到line-height
input{height:40px;line-height:40px;}
在ff没用
在ie下效果100分，完美，方便
在opera下效果也很好，不过不是line-heigth的功劳
在safari,chrome会垂直居中，不过不是line-heigth的功劳，而且效果不堪入目，因为一开始时光标有line-height那么高(这里为40px)
经分析line-height作废

第二个方法padding-top
当然考虑到<input type="text" />的高度不会太高，所以用padding-top不失为一个好方法。（提一下，www.bing.com的输入框好像挺高的，但是并不是白色的背景都是input的部分，这在safari和chrome就可以很明显看出；补充多一句，要完全一样居中牵强，只能做到大部分居中）

以上说到opera,safari,chrome会垂直居中
字体到顶边的距离与到底边的距离大1px或2px;
vista,windows 7比windows xp的字体大一像素,我也不清楚vista,windows 7会发生什么，所以不没有追求严格的垂直居中

回到原来的话题，要求:
width:150px;height:22px;font:14px "宋体";垂直居中
通过以上总结可得:
input{padding:3px 0 0 0;width:170px;height:19px;font:14px "宋体";border:1px solid gray;}
各浏览器都为width:170px height:22px
ff(完美)
上边距=1px(原先字体和顶边有1px) + 3px(padding-top:3px)=4px; 字体=13px; 所以下边距=22 - 4 - 13=5px;
ie(还行)
上边距=0px(原先字体和顶边紧贴) + 3px(padding-top:3px)=3px; 字体=13px; 所以下边距=22 - 3 - 13=6px;
safari,chrome(完美)
字体=13px;总高=padding-top  + padding-bottom+height=3px + 0px + 19px=22px;
总高-字体=9px;
(字体到顶边的距离与到底边的距离大1px或2px;x)
可得上边距=4px;下边距=5px;
opera(不太理想)
和safari,chrome不同，opera居中原则仅仅是在height的高度内居中
字体=13px;height=19px;height-字体=6px;
(字体到顶边的距离与到底边的距离大1px或2px;)
上部分=2px;下部分=4px;
上边距=上部分+padding-top=5px;下边距=4px;

呵呵,ie下的问题完全可以做得更好，如果你不吝啬两行代码的话
input{padding:3px 0 0 0;width:170px;height:19px;font:14px "宋体";border:1px solid gray;}
* html input{padding-top:4px;height:18px;}/* ie6 */
*+html input{padding-top:4px;height:18px;}/* ie7 */

这样ie,ff,safari,chrome就一样了。都为上边距=4px;下边距=5px;
其实也可以用hack来校对opera,但是opera的hack不能通过w3c验证,所以opera小弟就将就一下吧！

相信对<input type="text" />的样式设置都有了比较深入的了解了。





伴着<input type="text" />的基础，快速过一遍<textarea></textarea>
textarea{overflow-y:auto;width:100px;height:100px;}时：
ff
w:102px h:102px
ie
w:104px h:104px
safari
w:100px h:100px
chrome
w:104px h:104px
opera
w:104px h:104px
textarea{overflow-y:auto;padding:0;width:100px;height:100px;}时:
ff
w:102px h:102px
ie
w:100px h:100px
safari
w:100px h:100px
chrome
w:100px h:100px
opera
w:102px h:102px
textarea{overflow-y:auto;width:100px;height:100px;border:1px solid gray;}时:
ff
w:100px h:100px
ie
w:102px h:102px
safari
w:100px h:100px
chrome
w:104px h:104px
opera
w:102px h:102px
textarea{overflow-y:auto;padding:0;width:100px;height:100px;border:1px solid gray;}时:
全部为w:100px h:100px
这个textarea很混乱。但是设置了padding:0和border:1px solid gray后就全部都统一了。
所以强烈建议重写一下padding和border。