我在“.thumbHolder”容器中有四个“.thumbnail”对象 (234 x 176)，该容器应与主“.row”容器齐平。
但是，“.row”高度在我的浏览器(Chrome 31.0.1650.57m 和 Firefox 25)中呈现为额外 4 个像素的高度。 “.row”的高度应为:176px，但正在以 181px 渲染。 CSS 应该允许我不需要指定高度，对吗？我有动态数量的内容，并且不希望运行 jQuery.css("height") 更新来删除这额外的四个像素。
将 font-size:0 应用于我的 CSS .row 类可以解决该问题。但没有实际的 float 文本，因此该解决方案感觉很糟糕。另一个解决方案是将 DOCTYPE 从“html”更改为 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">但是……好吧，Chrome 不应该支持简单、简单、简单的 html 元素作为 HTML5 文档类型吗？
我已经将“.row”背景设置为额外的 20 像素宽，因此，如果额外的高度得到解决，我仍然可以看到粉红色的“.row”背景颜色并确认高度是我希望的高度是。
我的 HTML(我也尝试过将所有 div 内联，没有任何格式中断):
<body>
<div class="row">
<div class="thumbHolder">
<div class="thumbnail"><img src="http://media.edge-online.com/wp-content/uploads/edgeonline/2012/12/Batman-Arkham-City.jpg"/>
</div>
<div class="thumbnail"><img src="http://media.edge-online.com/wp-content/uploads/edgeonline/2012/12/Batman-Arkham-City.jpg"/>
</div>
<div class="thumbnail"><img src="http://media.edge-online.com/wp-content/uploads/edgeonline/2012/12/Batman-Arkham-City.jpg"/>
</div>
<div class="thumbnail"><img src="http://media.edge-online.com/wp-content/uploads/edgeonline/2012/12/Batman-Arkham-City.jpg"/>
</div>
</div>
</div>
</body>
我的CSS:
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background-color: #94b7d2;
}
.row {
width:956px;
margin: 0 auto;
background-color: #f00fff;
}
.thumbHolder {
display:inline-block;
margin: 0 auto;
}
.thumbnail {
width: 234px;
height: 176px;
display:inline-block;
float:left;
}
.thumbnail img{
width:234px;
height:176px;
}
这是给你的 jsFiddle:http://jsfiddle.net/8gWWx/
到底是什么？这是液体施胶所能做的最简单的事情，对吗？没什么复杂的。我已经验证了 CSS 和 HTML，除了缺少属性之外，它是可靠的。
为任何解决方案干杯......我用这个解决方案难倒了我的同事!
干杯!
最佳答案
.thumbHolder 是 inline-block，因此有用于字符下伸部分的空间。将其设置为阻止并感到高兴。
关于html - 额外的高度被添加到 div 中，但是从哪里开始呢？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20252848/