input标签写CSS时需要注意的几点

　　飞鱼的声纳顶部的查找框让我头疼了很长期，缘由是总不能 获得跨阅读器的统一 款式 。重要的问题有这么两个：一是input标签的高度不能统一，Firefox和IE中的高度始终不能 统一；二是在IE阅读器中属性为text的input标签中的输入文字不像 标准阅读器中的那样垂直居中显示，而是靠输入框的左上角显示 。

　　为了彻底解决查找框的这些问题，我以GreenGaint主题查找框的 款式为准，重写了一遍代码而且以像素为单位测量了一下在没有任何 款式表的状况下＜input>标签在默许阅读器中的实际差异 。

　　 后果发现：input标签在type为text时，在Firefox和Safari中的默许高度为22像素(包含上下边框)宽度为146像素(包含左右边框)，而在IE中的默许高度为24像素，而宽度却和Firefox和Safari是 统一的，也是146像素 。当 input标签在type为submit时，在Firefox中的高度为23像素(包含 暗影)，宽度为75像素 。在Safari中高度为21像素，宽度为73像素，在IE中高度为为25像素、宽度为73像素 。

　　那么在 款式化input标签时又该 留神哪些问题呢？先来看下面 通过 款式化后，在不同阅读器中都有着良好 体现的查找框 。

　　总结一下，在给input标签写CSS时需求 留神的有以下几点：

　　一、不要给属性为text的input标签设置高度，这样 无奈让IE阅读器下输入框中的文字垂直居中显示 。 只管你后来想要通过设置padding属性来让文字居中，你会发现 根本没法让它在Firefox和IE中 获得 统一的 动机 。正确的做法是直接给input标签设置padding属性，通过内边距属性来调节input标签的高度，而且这时IE中的文字也是居中显示的 。

　　二、input标签不会继承父元素的字体 款式和大小，需求直接给input标签申明font-family和font-size属性 。

　　三、给属性为text的input标签设置 合适的width属性和padding属性，确保其中的文字在 合适的 规模内浮现 。尤其是 使用了背景图片后，要让文字框的大小和背景图片的大小相当，这样看上去更加 好看 。