大家好,早上好!
我今天遇到的问题是 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
提前致谢。
(抱歉啰嗦了,只是想画个图)
最佳答案
去掉.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;
}
关于css - IE7 奇怪的间距问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7833049/