亲身历险

1. IE7, 应对不识别的样式值
IE7
对span, display: inline-block;
display: -moz-inline-box;
结果span 没有应用到任何display样式, 推理, IE7遇到自己不识别的样式值时会恢复默认值.
未验证.

2. z-index
1. 和 relative, absolute, fixed定位相关
1.1 relative 会遮挡 static。如果需覆盖 relative，则该元素也需为relative，并且给 z-index设置一个更大的值。此时和父元素的 z-index无关。
2. 栈原理. 两个设置了 z-index 的DOM, 最终谁覆盖谁受祖先层的 z-index 影响.

3. display: inline-block

<li>
    <span class="middle">
        <span class="left"></span>
        <span class="left-trigger"></span>
        <a class="aps-menu has-children" href="">${title}</a>
        <span class="right"></span>
        <span class="trigger"></span>
    </span>
<li>
li没有设置display属性, 其他所有元素 inline-block, left, right浮动.

Chrome
子元素 display: inline-block 影响 display: list-item (也就是li) 的父元素高度变高.
FF
造成left, right覆盖middle.
2中方案解决:
1. 设置 middle 为 block.
2. 浮动 middle
另外避免使用 display: -moz-inline-box;会引起很多意想不到的现象.
IE7
li元素高度变高. 设置li为 inline-block 可解决.


4. float
清除