css - IE7 奇怪的间距问题

Question

大家好，早上好!

我今天遇到的问题是 IE7 对我正在进行的工作的网站的渲染(震惊，恐怖)。下面是一些旨在创建页面宽度的代码 <div>在左侧有一个图像(箭头)，然后在图像右侧有 2 行文本，然后是一个进度条支架 <div>与另一个<div>里面将扩大和缩小以填充进度条。

<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>

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

这是CSS；

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

.courseItem img {
float: left;
margin: 0px 20px 15px 0px;}

.courseItem p {
font-size: 11px;
color: #999999;
margin: 5px 0px 0px 0px;
padding: 0;
float: left;}

.courseItem p span.title {
margin: 0;
padding: 0;
font-weight: bold;
font-size: 12px;
color: #00154d}

.courseItem .courseProgress {
float: right;}

 .courseItem .courseProgress p {
width: 50px;
font-size: 20px;
color: #52b9ed;
margin: 7px 0px 0px 10px;}

 .courseItem .courseProgress .progressContainer {
margin: 15px 0px 0px 0px;
padding: 0;
width: 120px;
height: 12px;
background: url(../images/courses-empytprogress.jpg) no-repeat;
float: left;}

.courseItem .courseProgress .progressContainer .progressFill {
margin: 1px 0px 0px 0px;
height: 10px;
max-width: 120px;
background: url(../images/courses-fillprogress.jpg) repeat-x;
float: left;}

这是视觉表现

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

提前致谢。

(抱歉啰嗦了，只是想画个图)

Answer 1

去掉.div p的float:left属性，添加display:inline-block;。然后，为 .clearBoth 类定义 clear:both CSS 属性。

fiddle :http://jsfiddle.net/Jqhe8/

固定的 CSS:

.courseItem p {
    font-size: 11px;
    color: #999999;
    margin: 5px 0px 0px 0px;
    padding: 0;
    display: inline-block; /*Removed float, added display*/
}
.clearBoth { /*Define clear:both!!!*/
    clear: both;
}