去掉谷歌浏览器默认的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的处理

除IE内核浏览器外，缺省

line-height

时都会自适应文本框的

height

。

IE下

line-height

对文本框有效，加上与相同的

height

后可以让IE也垂直居中。

line-height

超过

height

时，文本框获得焦点后拖动鼠标或按 上下键会出现上下滚动的现象。

Webkit内核下，当缺省

line-height

是，文本会自适应文本框

height

。 并且

line-height

对其有效。

Geoko下，它的值会随

font-size

的改变而改变（可以通过firebug来看计算样式），而不能由 网页开发人员来定义。

Geoko下，文本框获得焦点时的光标的大小由文本框的

height

决定，基本等于文本框的

height

。

Opera的表现最为优雅，

line-height

完全无效，文本始终垂直居中，光标也不会出现Geoko的 问题。