Monthly Archives: 十一月 2012

关于input的border与height的关系

Posted on by

最近发现一个问题，在给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.

harviewer在IE下不能使用事件绑定的bug修复

Posted on by

har文件是一种记录页面加载过程的标准格式，最近需要将这个文件可视化的展现出来。网上也有一些能够可视化展现har的工具，其中harviewer算是其中比较优秀的一个，项目主页：http://code.google.com/p/harviewer/。
但是试用了一段时间之后发现了一些问题，其中最严重的一个问题就是在IE8及更早版本中使用官方文档中说的如下方式调用的时候会无效：

	$("#content").bind("onViewerPreInit", function(event){
		    // Get application object
		    var viewer = event.target.repObject;
		    viewer.loadHar("z.har");
	});

原因是在代码中作者使用了document.createEvent来实现fireEvent函数，但是这个函数在低版本的IE中是不受支持的。我修改了原来的fireEvent函数，使用jquery来实现，可以达到很好的浏览器兼容性。不解的是，作者在项目中使用了jquery，但是这里却要自己去实现，这么写不混乱么？

修改后的代码我上传到了github，同时还进行了部分汉化工作，地址：https://github.com/zhujianfeng/harviewer