最近有个项目要求是兼容IE7以上，各种头大啊！！

最怕是搞IE兼容了，各种 css hack…

先记录一下input的兼容处理方案

输入框

html代码

1
<input type="text" class="text" value="" placeholder="请输入关键字">

css代码

1
2
3
4
5
6
.text{
    width:200px;
    height:20px;
    border:1px solid #ccc;
    padding:10px;
}

遇到问题

  • IE下输入中文上下不居中
  • placeholder IE9以下不兼容

1.中文居中解决方法

设置输入行高，中高度一致，很基本的属性

1
2
3
4
5
6
7
.text{
    width:200px;
    height:20px;
    line-height: 20px; /* 添加行高 */
    border:1px solid #ccc;
    padding:10px;
}

2.placehoder解决方法

  • 弃用placehoder属性，使用jsonfoucs、onblur模拟提示显示value的值
1
<input class="text" type="text" value="请输入关键字" style="color:#999" onfocus="if(this.value=='请输入关键字'){this.value='';this.style.color='#000'}" onblur="if(this.value==''){this.value='请输入关键字';this.style.color='#999'}">

效果肯定没这么完美，基本满足了需求。

继续使用placehoder，可以使用下JQ方法，解决高版本为了兼容低版本的IE而放弃placeholder：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$(function(){
  //判断浏览器是否支持placeholder属性
  supportPlaceholder='placeholder'in document.createElement('input'),
  placeholder=function(input){
    var text = input.attr('placeholder'),
    defaultValue = input.defaultValue;
    if(!defaultValue){
      input.val(text).css("color","#999");
    }
    input.focus(function(){
      if(input.val() == text){
        $(this).val("");
      }
    });
    input.blur(function(){
      if(input.val() == ""){
        $(this).val(text).css("color","#999");
      }
    });
    //输入的字符不为灰色
    input.keydown(function(){
      $(this).css("color","#000");
    });
  };
  //当浏览器不支持placeholder属性时，调用placeholder函数
  if(!supportPlaceholder){
    $('input').each(function(){
      text = $(this).attr("placeholder");
      if($(this).attr("type") == "text"){
        placeholder($(this));
      }
    });
  }
});

按钮

1
<input type="subimt" class="btn" value="立即查找">
1
2
3
4
5
.btn{
    padding:5px;
    border:1px solid #ccc;
    background: #f8f8f8;
}

IE7具有一个致命的问题，就是宽度变长了，感到奇怪，都没有定宽度的呀，怎么会这样呢？上下也不居中

解决方法：查看以下css

1
2
3
4
5
6
7
8
9
.btn{
    padding:5px;
    border:1px solid #ccc;
    background: #f8f8f8;
    height:28px; /* 设置行高是为了解决Safari和Chrome下的高度问题 */
    line-height:18px;
    overflow:visible; /* 只有设置这个属性IE下padding才能生效 */
    filter:chroma(color=#000000); /* 去掉IE点击黑边框 */
}