去掉谷歌浏览器默认的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的 问题。