line-height

最近发现项目中的搜索输入框出现了一点问题。

输入框中的光标在不同浏览器中的长度有异。

class如下：

.seek{
    width:300px;
    height:25px;
    margin:5px 0;
    line-height:25px;
    border:1px solid #ccc;
    padding-left:5px;
}

在firefox下显示为：

在safari下显示为

在chrome下显示为

在IE先显示为

后来调整代码为

.seek{
    width:300px;
    height:25px;
    margin:5px 0;
    line-height:25px\9;
    border:1px solid #ccc;
    padding-left:5px;
}

在firefox,safari,chrome下显示如下

firefox

safari

chrome

心得：

1. 类似搜索之类的输入框，行高可以写成只针对IE。
2. line-height:25px\9;后面的\9是针对IE的hack。
3. 以后写页面查看效果的时候尽量不要用firefox，因为很多样式在firefox下查看是正常的，但是到了chrome和safari，以及IE里面就会存在样式错误现象。
4. 以后项目中弄好一个页面，就算那边要的时间再急也要查看下页面的兼容性，因为在firefox下查看是好的，但是到了对方也许他用的不是firefox，那么这时就会出现错误现象，就要打回再次修改，给人留下不专业的印象。