Browser Compatibility Technologies

• FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float 的 div 在 IE 下 margin 加倍等问题.

• 浮动 IE 产生的双倍距离

  				
  #box {
  	float: left;
  	width: 100px;
  	margin: 0 0 0 100px; /* 这种情况之下IE会产生200px的距离 */
  	display:inline; /* 使浮动忽略 */
  }
  				 
  			

  这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素)。

• IE 与宽度和高度的问题

  IE不认得min-这个定义，但实际上它把正常的 width 和 height 当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

  				
  #box {
  	width: 80px;
  	height: 35px;
  }
  html > body #box{
  	width: auto;
  	height: auto;
  	min-width: 80px;
  	min-height: 35px;
  }
  				
  			

  第一个min-width是正常的；但第2行的 width 使用了 Javascript，这只有 IE 才认得，这也会让你的HTML文档不太正规。它实际上通过 Javascript 的判断来实现最小宽度。

  				
  					#container {
  						min-width: 600px;
  						width: expression(document.body.clientWidth < 600 ? "600px" : "auto" );
  					}
  				
  			

• DIV 浮动 IE 文本产生 3px 的 bug

  左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距。

  				
  #box {
  	float: left;
  	width: 800px;
  }
  #left {
  	float: left;
  	width: 50%;
  }
  #right {
  	width: 50%;
  }
  *html #left {
  	margin-right: -3px;
  }
  				
  				
  <div id="box">
  	<div id="left"><⁄div>
  	<div id="right"><⁄div>
  <⁄div>
  				
  			

• IE 捉迷藏的问题

  当 div 应用复杂的时候每个栏中又有一些链接，div 等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。