2012-06-11 143 views
1

請參閱here,在帖子結尾處,來自gravatar.com的70px作者圖像有一個神祕的底部填充,使得底部填充比頂部,左側和右側更寬。CSS中的神祕底部填充

我看了所有3個瀏覽器,FF11,Chrome和IE9,都出現同樣的問題。我找不到Firebug的罪魁禍首。額外的填充是沒有填充也沒有任何餘量!

有什麼想法?

+1

https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps – Alohci

回答

2

嘗試設置height到的Gravatar包裝div - http://jsfiddle.net/AMf5N/1/

#post-author .profile-image { 
    background: none repeat scroll 0 0 #F6F6F6; 
    border: 2px solid #fff; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); 
    float: left; 
    height: 70px; /* add this */ 
    margin: 0 15px 5px 0; 
    padding: 5px; 
} 

float圖像 - http://jsfiddle.net/AMf5N/

+0

雖然這起作用,但它不僅僅是解決方案。例如,如果圖像高度發生變化,則父母不會相應地改變。 – joshnh

+0

@joshnh你有沒有看到「浮動」答案的第二部分?它可以處理任何尺寸的圖像。所以OP可以選擇他最需要的套房。 –

+0

我做到了。儘管解決實際問題仍然更好,而不是從文檔流中刪除圖像。你的兩個選擇都有效,但他們都沒有處理實際問題,而且他們都有可能導致其他問題。 – joshnh