Question

大家好，早上好！

我今天遇到的问题是IE7对我正在进行中的工作网站的渲染（震惊，恐怖）。下面是一些代码，用于创建页面范围<div>，左侧有一个图像（箭头），然后是图像右侧的2行文本，然后是进度条持有者{{ 1}}内部的另一个<div>将被加宽和缩小以填充进度条。

<div>

现在，你问的问题是什么？好吧问题是，由于某种原因，这真的让我感到困惑，这些条形码中的第一个（总共有4个，与上面的代码完全相同，没有任何变化）之间有一个巨大的空白区域本身及其边界迫使其他3个酒吧被推开。

这是css;

<div class="courseItem">
            <img src="images/courses-arrow.jpg" width="41" height="41" alt="->" />
            <p><span class="title">Intermediate Microsoft Excel 2010</span><br />
            <strong>Last accessed:</strong> 21st September 2011</p>
            <div class="courseProgress">
                <div class="progressContainer">
                    <div class="progressFill" style="width: 60px">
                    </div>
                </div>
                <p>50%</p>
            </div>
            <div class="clearBoth"></div>
        </div>

这是视觉表现

http://img1.uploadscreenshot.com/images/orig/10/29204251178-orig.jpg

提前致谢。

（抱歉长篇大论，只想画一幅画）

Answer 1

在您的代码中，您没有清除它parent div＆amp;你.clear class没有这样做;首先clear parent div，因为child div's中有float。像这样写

.courseItem {
    border-bottom: 1px solid #B0DFF7;
    margin: 0 0 15px;
    overflow: hidden;
}

Answer 2

删除float:left的{{1}}属性，然后添加.div p。然后，为display:inline-block;类定义clear:both CSS属性。

小提琴：http://jsfiddle.net/Jqhe8/

修正了CSS：

.clearBoth

IE7奇怪的间距问题

2 个答案: