短父元素中浮动图像上不需要的底部边距

Question

我有一个只能在移动版 Safari 中查看的页面，带有以下 HTML 标记：

<blockquote>
  <p><img src="..."/> A paragraph...</p>

  <p>...</p>

  ...
</blockquote>

还有这样的 CSS：

blockquote {
  border-left: 1px solid #888;
}

blockquote img {
  float: left;
  margin: 0 20px 20px 0;
}

当段落文本足够长时，这会产生预期的效果：

| IMAGE  A paragraph, blah blah blah...
| IMAGE  blah blah blah...
| IMAGE  
|        More paragraph, blah blah blah...
| blah blah blah, blah blah blah...

例如，见http://jsfiddle.net/KDYCN/

图像右侧和底部的边距需要在图像和文本之间提供所需的空白。

但是，当段落文本很短时，它会在底部产生不需要的边距。通常这不会是一个问题，但左侧的边界线使这个故障像拇指一样突出：

| IMAGE  A paragraph, blah blah blah...
| IMAGE  blah blah blah...
| IMAGE  
|

例如，见http://jsfiddle.net/KDYCN/1/

关于如何解决这个问题的任何想法，除了让所有引号足够长吗？ :) 即使是 JavaScript 解决方案也是可以接受的，尽管并不理想。谢谢！

Answer 1

改变这个：

blockquote img {
  float: left;
  margin: 0 20px 20px 0;
}

到这里：

blockquote img {
  float: left;
  margin: 0 20px 0 0;
}

编辑：

我删除了它，它似乎可以解决问题：

blockquote:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

原因是这个隐藏的东西是在带有 clear:both 的图像之后，这使得块引用足够高以包含文本和图像。通过暂时给块引用一个边框来查看它的实际效果：

blockquote {
    border: 1px solid #00ff00;
}

我喜欢霓虹绿，因为它很容易看到，而且通常不应该是那种颜色，所以也很容易看出我是否将调试代码留在原处。