[英]Why does IE7 when clearing a float result in a margin bug?
I have a very simple HTML page (validates as XHTML 1.0 Strict): 我有一个非常简单的HTML页面(验证为XHTML 1.0 Strict):
<div class="news-result">
<h2><a href="#">Title</a></h2><span class="date">(1-1-2009)</span>
<p>Some text...</p>
</div>
with the following CSS: 使用以下CSS:
.news-result {
overflow: hidden;
padding: 30px 0 20px;
}
.news-result h2 {
float: left;
margin: 0 10px 0 0;
}
.news-result span.date {
margin: 1px 0 0;
float : left;
}
.news-result p {
padding: 3px 0 0 0;
clear: left;
}
Rendering this page in IE6 or FF3 render perfectly (the title and the date on a single line, followed by the paragraph). 用IE6或FF3渲染此页面可完美渲染(标题和日期在一行上,后跟段落)。 In IE7 however, there is a large space between the title and date, and the paragraph. 但是,在IE7中,标题和日期与段落之间有很大的距离。
We have a simple reset that clears every margin and padding on every element. 我们有一个简单的重置,可以清除每个元素上的每个边距和填充。
Dropping the float on the date element fixes this problem, as does setting zoom: 1
on the paragraph or removing overflow: hidden
on the container, but all are not ideal. 将float放置在date元素上可以解决此问题,在段落上设置zoom: 1
或除去容器上overflow: hidden
都可以,但是所有方法都不理想。 Why does a float followed by a paragraph trigger this additional top margin, only on IE7? 为什么仅在IE7上,浮点数后接段落会触发此额外的上边距?
Can I assume that you have a doc-type? 我可以假定您具有文档类型吗?
However, change the h2 and span to display: inline; 但是,将h2和span更改为显示:inline; should also clear up your issue. 还应该解决您的问题。
Edit --- adding hasLayout 编辑-添加hasLayout
Understanding that inline isn't always an option, here's an article explaining what's going on . 了解内联并不总是一种选择,这里有一篇文章解释了正在发生的事情 。
Essentially you have to give the <p>
hasLayout. 本质上,您必须提供<p>
hasLayout。 There are many ways to do this, and I don't like using <div class="clearall"></div>
and prefer to use overflow: hidden;
有很多方法可以做到这一点,我不喜欢使用<div class="clearall"></div>
,而是更喜欢使用overflow: hidden;
or zoom: 1;
或zoom: 1;
I'm seeing the extra whitespace in IE6, 7 and 8B2. 我在IE6、7和8B2中看到了多余的空格。
It appears that IE has a non-zero top-margin applied to the <p>
tag. 看来IE在<p>
标记上应用了非零的上边距。
I was able to remove the whitespace in IE by making the following change: 通过进行以下更改,我能够删除IE中的空格:
.news-result p {
margin-top: 0;
padding: 3px 0 0 0;
clear: left;
}
The change did not seem to have any negative side-effects in Firefox 2 or 3, Opera 9.63 or Safari for Windows 3.2.1. 在Firefox 2或3,Opera 9.63或Windows 3.2.1的Safari中,此更改似乎没有任何负面影响。
Just add
只需添加
between the floated DIV and the clearing div. 在浮动DIV和结算div之间。 That will remove the gap. 这将消除差距。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.