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

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

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

  <p>...</p>

  ...
</blockquote>

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

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

例如，请参见

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

但是，当段落文本较短时，它会在底部生成不需要的边距。正常情况下，这不会是一个问题，但左边的边界线使这个小故障像拇指酸痛一样突出：

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

例如，请参见

除了把所有的引语都写得足够长之外，还有什么办法解决这个问题吗？：）即使是JavaScript解决方案也可以接受，但并不理想。谢谢

改变这一点：

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足够高，可以同时包含文本和图像。通过临时给blockquote一个边框来查看它的实际操作：

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

---

我喜欢霓虹灯绿色，因为它很容易看到，通常没有什么东西应该是那种颜色，所以如果我把调试代码留在原处也很容易看到。

请提供一些屏幕截图，也许是中的工作示例，以及指向您正在使用的图像的链接，或者您可能正在使用的图像的定义大小。是的，刚刚添加了两个JSFIDLE示例。多么棒的网站！图像有固定的宽度，但我事先不知道高度。但是页面是动态生成的，因此如果有帮助的话，我可以对每个具有已知高度的图像应用单独的样式。这将删除底部边距，即“希望在图像和文本之间提供所需的空白”。问题是，我希望块引号足够高，能够同时包含图像和文本。我只是不想在不需要的时候在图片的底部增加额外的边距。然后从blockquote样式中去掉20px的边距，而不是在blockquote和下面的段落之间的左边有一个边框。

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