去掉谷歌瀏覽器默認的input、textarea的邊框

今天在制作表單的過程中遇到了兩個問題，

一個是當鼠標焦點在input、textarea這些元素上時，Chrome默認的會給它們加上黃色的邊框，

其實這是是css的效果，outline這個屬性。

設置outline: none;就會去掉，對其修改會怎么樣呢

例如：outline:Blue Solid 1px; 

這時會發現Chrome下獲得焦點outline會跑到border里面，致使表單獲取焦點時會變小一點，這個為什么還不太清楚，知道的可以給我留言

另一個是焦點的那個豎線問題

 

個瀏覽器高度都很跟字體高度保持一致但Webkit卻跟line-height一致

這時如果設置line-height為input高同，那么IE下就會文字居中顯示，但是Webkit內核下就會出現上圖的情況，光標線很長，如果不設置line-height值，那么Webkit內核瀏覽器表現很好，iE就會出現文字居頂

為了兼容所有瀏覽器，沒辦只有針對Webkit內核瀏覽器寫hack

hack寫法如下

@media screen and (-webkit-min-device-pixel-ratio:0) {
.a{ line-height:25px;}

}

說不清楚了，反正就是要Webkit和IE都表現完美

附：

查資料的知

不同瀏覽器對文本框行高line-height的處理

1. 除IE內核瀏覽器外，缺省line-height時都會自適應文本框的height。
2. IE下line-height對文本框有效，加上與相同的height后可以讓IE也垂直居中。line-height超過height時，文本框獲得焦點后拖動鼠標或按 上下鍵會出現上下滾動的現象。
3. Webkit內核下，當缺省line-height是，文本會自適應文本框height。 並且line-height對其有效。
4. Geoko下，它的值會隨font-size的改變而改變（可以通過firebug來看計算樣式），而不能由 網頁開發人員來定義。
5. Geoko下，文本框獲得焦點時的光標的大小由文本框的height決定，基本等於文本框的height。
6. Opera的表現最為優雅，line-height完全無效，文本始終垂直居中，光標也不會出現Geoko的 問題。