Question

我正在构建的设计中有一个奇怪的问题。

我创建了一个<div>来包含投票元素 - 它包含一个upvote按钮，downvote按钮和一个投票总计，每个都在他们自己的<div>元素中，并使用<img>作为按钮

来源：

<div class="votebox">
  <div class="vote"><img src="upvote.png" /></div>
  <div class="votetotal">15</div>
  <div class="vote"><img src="downvote.png" /></div>
</div>

在我的CSS中的迷你重置中，<div>和<img>元素都定义为没有边距或填充，FireBug确认这些特定元素没有边距或填充，但我是看到在<img>元素的底部和它们各自包含的元素的底部之间添加了空格。

我添加了以下CSS来显示每个元素周围的边框：

.votebox * {
  border: 1px #000 solid;
}

这就是它在Firefox 3.6中的显示方式（是的，那些是StackOverflow投票图像..我现在用它们作为占位符）：

现在，这个问题的明显答案是简单地将“投票”类设置为具有明确的图像高度（我将这样做，甚至可能选择<img>上的CSS精灵），但是我我更感兴趣的是学习为什么这些元素以这种方式显示（毕竟这应该是一个自学项目）。

有人能为我解释一下吗？

编辑：史蒂夫H向我指出，我应该使用轮廓而不是边框来显示元素的外边缘。我做了这个改变，并且还将CSS中的元素分开，这样它们每个都显示为不同的颜色。

新大纲如下所示：

如您所见，问题与我想的有点不同。看起来图像下面有一些空白，但是底部图像似乎在其包含<div>之外略微渲染的事实更加复杂。这对我来说似乎很奇怪。

Answer 1

HTML中的图像是内联元素，默认情况下放在字体基线上，因此您看到的可能是下划线的空间。通常的做法是将其设置为display: block或vertical-align: bottom。

编辑：顺便说一下，你可以像使用任何其他元素一样使用CSS格式化图像，这样你几乎可以放弃图像周围的额外div。

Answer 2

取决于您使用的doctype。如果您使用Transitional（<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">），它将以您希望的方式显示。

过渡时的示例：http://jsbin.com/icesi

严格的例子：http://jsbin.com/icesi/2

可能有助于您了解问题的相关声明如下

这是另一个例子。你可能有发现设置font-size：medium 导致不同的字体大小资源管理器与导航器。这发生了因为互联网的方式 Windows团队的资源管理器解释 CSS规范的目的。为了保持一致 Windows版本，Internet Explorer for Macintosh模拟了它的行为 4.x系列。如果你把IE5 / Mac 进入bugwards兼容模式，它将继续处理font-size：介于IE4.x / Win中。 严格要求然而，它将充当导航器确实如此，这实际上是正确的根据W3C解释。

来源：http://oreilly.com/pub/a/javascript/synd/2001/08/28/doctype.html?page=2

Answer 3

您使用严格的doctype，所以

.votebox img{display:block;}

应该做的伎俩

<div>内部出现未知的空格，没有填充或边距</div>

3 个答案: