我們實現一個輸入框的視覺的時候為了保持其各種各樣的兼容性：
1.鼠標要跟文字一樣高度。
2.文字要居中對齊。
3.還要有placeholder
第一個目標，當實現一個高度為40像素的高度輸入框時，為了與鼠標對齊，我們會默認輸入框的高度與字體高度差不多高度。多了會顯得輸入光標過高。
第二個目標，文字居中對齊的話我們會設置line-height與輸入框高度一致。
所以有了這段 <input type="text" value="ceshigjwkegjwl官網看給我個看過" class="ceshi-input"/>
css為：.ceshi-input{border:20px solid #ccc; background:#fff; height:18px; font-weight:normal; font-size:14px; line-height:18px; font-family:"Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;}
下面是展示效果：
以上經測試在所有瀏覽器中顯示一致。
但素：：：：：：
為了有placeholder,我們默默的加上了placeholer屬性，於是有了：
<input type="text" palcehoder="ceshigjwkegjwl官網看給我個看過" class="ceshi-input"/>
然后一看效果：
明顯不是一樣對齊的呀。嗷。
修改辦法：
ie9包括其本身以下的輸入框里面的文字對齊方式是默認頂對齊。
其他的默認是居中，placeholder在沒有line-height的情況下是和value一樣對齊的。
所以取個居中和頂對齊的和諧位置就是把可輸入區域的高度與字體大小相差無幾。這樣就看起來差不多了。
不設置line-height;其他的空余區域用padding頂出來就可以做到輸入光標與字體大小一致和諧。
又有方案說直接設置line-height:normal;就可以。不懂其中原理。
而且還可以直接作用於placeholder，如：
input::-webkit-input-placeholder { /* WebKit browsers */
line-height: 1.5em;
}