最近发现一个问题,在给input设置边框宽度和高度的时候,在不同的浏览器下表现不同,整了很久,这里整理一下发出来。首先说一下,本文只讨论作为行内替换元素的input,且type为text的输入框。其他input类型没有做实验,块元素也不在讨论范围内。

正式讲问题之前要先讲一下css的盒模型,盒模型有W3C的标准盒模型和IE盒模型两种,两者的区别在于如何定义height和width。在W3C标准盒模型中height指的是内容区的高度,在内容区之外还有padding-top,padding-bottom,border-top,border-bottom,margin-top,margin-bottom,也就是说指定的高度就是内容区的高度,不会因为边框的粗细导致内容区的高度变化。而在IE盒模型中,height指的是内容区高度加上padding-top,padding-bottom再加上border-top,border-bottom的高度,一旦指定了height,当让边框变得更粗时,内容区高度就会变的更小。同样的,width的计算也类似。两种盒模型如最后附注所示。

好了,现在开始讲问题。当网页不指定DOCTYPE的时候,不同浏览器对text类型的input使用何种类型的盒模型是由浏览器自己决定的,为了搞清楚浏览器都怎么处理,使用以下代码在Windows平台上做了实验:

<html>
<head>
  <title>border test</title>
  <style type="text/css">
  	#input1 {
  		background-color: yellow;
  		width:200px;
  		height:50px;
  		border:5px solid #000;
  	}
  	#input2 {
  		background-color: yellow;
  		width:200px;
  		height:50px;
  		border: 0px;
  	}
  </style>
</head>
<body>
	<input type="text" id="input1" />
	<input type="text" id="input2" />
</body>
</html>

这段代码主要是放置了两个高度为input,给其中一个设置5像素宽的边框,然后比较两者的高度。
实验结果如下表:

从图中可以看出,chrome,firefox,safari和IE6一样,使用的是IE盒模型,而IE7到IE10使用的均是W3C盒模型(当然,从图中看IE7的行内对齐可能和IE8以上不同)。也就是说,我给input设置了50像素的高度,在chrome、firefox、safari和IE6下,内容区高度会被减去边框的10像素,只有40像素,而在IE7到IE10中,内容区高度就是50像素。
但是,如果一旦给网页指定doctype,也就是在网页第一行加上这么一行(当然也可以使用html5的标记,只是这样IE6就不认识了),结果就不一样了。如下图:

从这里可以看出,所有的浏览器都是使用W3C盒模型的,只是IE6和IE7在行内对齐上有一些不同。

总结一下,为了避免踩坑,最好给网页指定doctype,这样就都符合w3c标准了。同时,没搞清楚的是为什么chrome、firefox、safari在未指定doctype情况下会使用IE盒模型,还望有高人解答。

附:两种盒模型(图片来源网络)

Posted in css.

Leave a reply

required

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>