不需要的底部邊緣

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; 
} 

原因這個隱藏的東西是在圖像w之​​後明確：兩者都使得blockquote的高度足以包含文本和圖像。看到它在行動通過給塊引用邊框暫時：

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

我喜歡綠色霓虹燈，因爲它很容易地看到，通常沒有什麼應該是顏色，因此它也很容易看到，如果我留在原位，我的調試代碼。