今天，我检查了一下我写的 豆瓣官网 (就是 douban.html 这个文件)的兼容性问题，用IE、edge、Chrome、Firefox 这四个浏览器分别打开。发现只有 IE 的出现了点问题，其它三个的都很完整。
正常的结果是：

IE 的结果是：

“豆瓣6.0”左边的背景图没了，然后右边的输入框变矮了许多，但是上边的输入框却是正常高度。

查看 css，发现这两者的高度样式区别是第一个是直接使用 padding，第二个是使用 line-height 而不用 padding。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*#find 上面那个输入框的 id*/
#top .search #find{
    width:240px;
    padding:5px;
    color:#ddd;
}

/*这个是右边输入框的属性*/
#home .login .infor input{
    width:220px;
    padding:0 8px;
    line-height: 30px;
    margin-right:3px;
}

将 inline-height 删掉，然后修改 padding: 8px; 结果就正常了。

我上午查找了一下 关于input兼容问题

input和select的高度样式写法

所有的form表单中的 input和select的高度样式写法，不要写成height和line-height；不然就会出现一定的兼容问题；

  • 该问题也可归结为下面几个问题：
    input,select不适合line-height；
    input框光标不居中；
    input框光标在谷歌浏览器不居中朝上；
    select框给了高度，但不居中；
  • 好处(这个存在一定的问题)：
    可以解决input中光标在360浏览器中很长问题;
    可以解决input中光标在谷歌浏览器里朝上的问题;
  • 解决方案：
    使用padding就可以轻松解决;
    一般写法：给input和select高度为height：30px; line-height:30px; 这样的写法就会造成上面的问题；应按如下写
    input写法: padding：5px 3px; height:20px;
    select写法: padding：5px 3px; height:30px;
    这样效果和前面的是一样的input和select的区别就在height上；