Question

这让我发疯了......可能是非常简单的事情，我只需要另外一双眼睛来看待它......

我的CSS中有这个：

#recipient {
width: 31%;
text-align: center;
min-height: 335px;
float: right;   
background-color: #fff;
color: #000;
border: 2px solid black;
margin: 20px 0 0 0;
padding: 11px 0;
font-size: 0.875em;
}

并在我的HTML中调用它：

<div id="recipient">
<h3>Meet the 2010 Recipient!</h3>
<a href="recipient.html"><img src="images/2010_headshot.jpg" alt="foo" /></a>
</div>

非常简单，对吧？在Firefox中，它渲染的高度比IE7高出约20px（我可以看出这个div的底部在页面上的其他元素旁边的位置）。我在标准模式下运行，看过Firebug中的Firefox版本和带有Firebug Light和IE Dev工具栏的IE版本 - 看不到任何奇怪的东西...... div的顶部从右侧开始现货，所以它看起来不像边缘崩溃......

如果我手动为CSS添加填充/高度，我可以让IE7在正确的高度排列，但是Firefox中的div太长了！它不是设计中的关键部分，但它正在困扰着我！

提前致谢...

Answer 1

这是IE以及处理浮动元素中默认h3边距的不同方式

通常这可以通过给出有问题的元素（任何具有默认边距的元素！）显式边距来修复，但在这种情况下，由于容器的顶部填充，它无法正常工作？

我能提出的最佳解决方法是从#recipient div中删除顶部填充并显式; y在h3 11px上创建顶部/底部边距这通过效果产生了很好的均匀空间（顺便说一句，如果div高于最小高度，这个额外的位就会发生） - 这里有一些工作代码 - 我还在h3上加了一个背景颜色，如果你这样做的话在你的代码中将显示15px左右的额外差距..

<强> CSS：

#recipient {
width: 31%;
text-align: center;
min-height: 335px;
float: right;   
background-color: #fff;
color: #000;
border: 2px solid black;
margin: 20px 0 0 0;
margin: 0;
font-size: 0.875em;
padding-bottom: 11px; /* bottom padding only */
}

h3 {
 margin: 11px 0; /* explicitly set these */
 background: #fcf;
}

HTML：（带有用于测试的占位符图片）

<div id="recipient">
  <h3>Meet the 2010 Recipient!</h3>
  <a href="recipient.html"><img src="http://placekitten.com/350/200/" alt="foo" /></a>
</div>

IE7和Firefox / Safari之间的高度计算差异

1 个答案: