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

最新推荐文章于 2025-09-04 18:55:33 发布

转载最新推荐文章于 2025-09-04 18:55:33 发布 · 62 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dirts/archive/2012/11/19/2777541.html

文章标签：

#javascript #ViewUI

文章详细介绍了在使用IE浏览器时，dl列表中使用display:inline-block和position:relative等属性可能导致的高度计算和页面渲染延迟问题，并提出了正确的解决方案：采用float:left和width:100%来避免此类问题。

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

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

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

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

 1 <dl>
 2     <dt></dt>
 3     <dd>
 4 　　　　　　<a href="javascript:;">评论</a>
 5         　<div class="comment-area" style="display:none"></div>
 6     </dd>
 7 </dl>
 8 <dl>
 9     <dt></dt>
10     <dd>
11          <div class="comment-area" style="display:none"></div>  
12     </dd>
13 </dl>

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

看一下dl的实现：

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

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

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

1 dl，ul li {
2     float:left;
3     width:100%;
4 }

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

display:inline-block;

position:relative;

持续补充。

转载于:https://www.cnblogs.com/dirts/archive/2012/11/19/2777541.html