CSS BOX(1)

#1 关于position: absolute;

当给一个元素设置了postion:absolute;样式时，会从它的父元素开始查找上级元素，直到查找到一个被定位的元素。（什么是被定位的元素呢？就是设置了position属性的元素。比如：position: relative;。）

此时该元素会根据被定位的父级元素（最近）左上角的位置定位。（设置top、left等属性的值改变相对位置）。

#2 IE7 bug

• IE7中使用float可能会产生bug

• IE7 z-index 失效bug

  首先要明确一点，z-index必须搭配定位元素使用。

  那，产生z-index失效的原因如下：

  绝对定位元素的“有定位属性的父元素”在渲染层次时起到了主要作用，前面的被后面的覆盖了。

  解决方法：为有定位属性的父元素设置z-index。例如：

  <div id="A" style="position:relative;z-index: 10;">
  	<div style="position: absolute;z-index: 999;">		</div>
  </div>
  <div id="B" style="position:relative;z-index: 1;">
  	<div style="position: absolute;z-index: 1;">		</div>
  </div>
  

  我们看到A元素的子元素z-index为999。

  B元素的子元素的z-index为1。

  然而如果B元素的z-index大于A元素，A元素的子元素是无法正常显示的。

#3 IE CSS hack

目前公司的项目只支持到IE8了。关于IE hack还是应该了解一下。网上有很多相关的文章，不过看的我眼花撩乱，我写的可能不全面，但力求清晰。

上个例子吧：

.style {
  width: 10px; /* FF及一般浏览器 */
  width: 20px\9; /* IE8 */
  *width: 30px; /* IE7 */
  _width: 40px; /* IE6 */
}

css hack的关键就是利用浏览器对不同代码的识别能力。

区别一：

IE6、7、8  均可识别 \9  (另外，IE8可识别 \0)
IE6、7     支持属性前加 * ，IE8及一般浏览器不支持
IE6        支持属性前加 _ (下划线) 其他不支持

区别二：

IE6 不识别 !important
IE7 可识别 !important

一般来讲，利用区别一就可以做很多hack了。

PS：IE的网页调试做的简直是渣，不过有一点还好，自带了兼容性测试。