调整input里面的输入光标大小并兼容主流浏览器

在项目里碰到过一个问题，input 输入框用一个背景图模拟，设置height和line-height一样的高度，使里面的输入文字能够居中。

在FF下出现的情况是：点击 input 时，输入光标其实上跟 input 的 height 一样高，但当开始输入文字时，光标又变得跟文字一样高，
chrome 下光标跟 input 的 height 一样高，而IE下光标跟文字的大小一致。

初步结论如下：

IE：不管该行有没有文字，光标高度与 font-size 一致。

FF：该行无文字时，光标高度与 input 的 height 一致，该行有文字时，光标高度与 font-size 一致（最新版的好像和IE一样了）。

Chrome：该行无文字时，光标高度与 line-height 一致；该行有文字时，光标高度从 input 顶部到文字底部（这两种情况都是在有设定 line-height 的时候），如果没有 line-height，则是与 font-size 一致。

解决办法：

1、给 input 的 height 设定一个较小的高度，然后用 padding 去填充，基本上可以解决所有浏览器的问题：

input {
    height: 16px;
    padding: 4px 0px;
    font-size: 12px;
}

2、只给 IE line-height 就可以了：

-ms-line-height: 40px;