关于CSS 的一点点小想法，待验证；

关于一个布局，利用html结构和css样式配合，有很多种方式都可以实现：

相对定位布局、绝对定位布局、浮动布局等等，那一种都可以实现各种各样的布局，没有孰对孰错。

最近学到一个词叫："最佳实践" ,举一个今天工作中遇到的具体的问题：

feed（<dl><dt></dt><dd></dd></dl>）列表下面通过ajax返回评论模板：

<dl>
    <dt></dt>
    <dd>
　　　　　　<a href="javascript:;">评论</a>
        　<div class="comment-area" style="display:none"></div>
    </dd>
</dl>
<dl>
    <dt></dt>
    <dd>
         <div class="comment-area" style="display:none"></div>  
    </dd>
</dl>

　 

思路是点击评论按钮提交ajax页面得到评论区域模板html innerHTML到 .comment-area  这个标签里并使 .comment-area  display:block; 思路是正确的。但实际上在ie下却出现了高度撑开的延迟(单条feed的高度没有被撑开，导致评论的错位，和下一条feed混在了一起):

看一下dl的实现：

dl {
    display:inline-block; /*为了变成行内块级元素，清除浮动*/
    width:100%; /* 为了撑开宽度 */
    overflow:hidden;
}
dt { float:left }
dd { float:right }

 

实际上如果是只实现样式，这个写法是没有大碍的，但是考虑到交互，就不行了：因为页面上有交互的存在，那么页面的环境是时刻变化的，通过display做的清除浮动，导致了ie下高度计算和页面重新渲染的延迟。(position:relative 也可能导致这个现象)；

所以更合适的的写法应建议使用 float:left；配合width:100% 这两个属性制作dl 或ul li列表：

dl，ul li {
    float:left;
    width:100%;
}

 

 目前已知ie7下有以下属性有时会导致这个bug:

display:inline-block;

position:relative;

持续补充。