ie6在布局上要注意的一些问题-20130927

1. 设置position: relative
将一个元素设置为”position:relative”可以解决很多问题，特别是遇到隐藏的或对齐诡异的盒子。显然，需要注意，因为绝对定位的子节点可能会因此重新定位。

2. 将浮动元素设置为display:inline
具有margin属性的浮动元素可能引起著名的IE6双倍margin问题，为一个元素指定margin-left为5px，但是IE6中实际上却表现为10px。”display:inline”将解决这个问题。

3. 将一个元素设置为hasLayout
很多IE6(和IE7)的渲染问题可以通过设置元素的hasLayout来解决。 这是一个IE内部属性（IE隐藏的，更多关于haslayout的资料，可以参阅这里），用来确定相对于其他元素，内容是如何布局和定位的。如果要设置一个inline元素(比如一个链接)为block元素，或者是应用透明效果，设置hasLayout也可能是必须的。

最简单的设置hasLayout的方法是为CSS设置一个高度或宽度（zoom也可以用，但是zoom并不是CSS标准的一部分）。设置实际尺寸，但是问题是这是不现实的，可能需要使用”height:1%”。如果父元素并没有设置高度，该元素的实际高度并不受影响，而且这个时候hasLayout已经被启用。

4. 修正重复文字bug
复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法，有些是完美的，但是做一些反复试验也是必须的：

确保所有的元素使用”display:inline;”
在最后一个元素上使用一个”margin-right:-3px;”

在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)
访问 positioniseverything.net 查看该问题的完整介绍。

5. 在可点击和悬停的元素上只使用标签IE6只认识对a标签的CSS hover效果。可以在基于JavaScript的组件内使用他们来控制，以使他们保持键盘的可操作性。是有一些可替代的选择，但是标签比其它方案更可靠。

6. 使用!important 或高级选择器来区分IE6不使用传统Hack或在额外文件中的条件CSS的方法，写出特别针对IE6的可行的代码也还是有可能的。比如最小高度可以通过这段代码来定义：

#element {
  min-height: 20em;
  height: auto !important; /* 所有浏览器都理解这段代码 */
  height: 20em; /* IE6 错误的使用这个值 /*
} 

IE6 不理解min-height并错误的用20em覆盖”auto”高度，但是，如果内容需要更多的空间的话，它会自动增加高度。

另外一个可选的方法是使用高级选择器

#element {
  min-height: 20em;
  height: 20em;
}

/* IE6 无视下面的代码*/
#element[id] {
   height: auto;
} 

7. 避免百分比单位
百分比会把IE搞糊涂的。除非可以确切的控制每一个父元素的大小，才可能做到最佳预防。可以通过!important在其他浏览器中继续使用百分比

body {
  margin: 2% 0 !important;
  margin: 20px 0; /* IE6 only */
} 

8. 重构的代码
经常发生的事情是，修正bug要比重新考虑一个布局问题要花更长的时间。对HTML做些小改动和一些简单的CSS常常更有效。