CSS: IE浏览器中text输入框与password输入框的宽度一致性问题

在Web表单设计过程中,经常需要用到类型为text的input输入框和类型为password的input输入框,最常见的就是用户登陆界面:

<label>Username</label>  
<input type="text">  
...
<label>Password</label>  
<input type="password">  

预期的界面效果是这个样子的: expect

在Firefox、Chrome、Safari和Opera中,上述效果没有问题;而在IE中,问题就来了。以IE10为例,上述代码所产生的效果如下: behavior in ie10

可以看到,text输入框和password输入框的宽度并不一致,password输入框的宽度要大一两个像素。

如果说这一两个像素的差异尚且可以接受的话,那么在将input输入框的字体设成粗体后,问题就变得很严重了:

input {  
font-weight:bold;  
}

serious-bug

问题的原因出在IE中input输入框的宽度自动调整算法上,经过测试后发现,不同版本的IE浏览器中该问题的情况也有所不同:

IE版本 input输入框中为粗体 input输入框中非粗体
IE10 .宽度差异较大 .宽度差异较小
IE9 .宽度差异较大 .宽度差异较小
IE8 .宽度差异较小 .宽度一致
IE7 .宽度差异较小 .宽度一致
IE6 .宽度差异较小 .宽度一致

很尴尬,在IE浏览器中,这个问题的情况是越来越糟糕了。

问题的解决方案

要在各个浏览器中保证text输入框与password输入框的宽度一致性,目前的解决方案是给它们设定一个宽度值:

input {
width:200px;
} 这样,所有的浏览器都会显示一个宽度为200个像素的输入框: fixed behavior

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!