野生動物園與意想不到的垂直瓷磚頁腳上的圖標，應該顯示在行

Question

我試圖添加Twitter/Facebook的圖標到網站頁腳，很像side.cr頁腳。我得到了一切工作，除了Safari瀏覽器有Twitter和Facebook的意想不到的垂直磁貼。我試圖上傳截圖，但我是新用戶，所以現在不能這樣做。

所以我在尋找答案，發現這個Q/A在這裏，Is <img> element block level or inline level?

所以我去了一次side.cr看到它的CSS確實有用戶代理樣式表。

我加入這行代碼到我的CSS：

.footer ul li img.t, li img.f { 
    width: 40px; 
    vertical-align: middle; 
    display: inline-block; 
} 

，它解決了這一問題。

但我在頭幾個問題：

1. 爲什麼side.cr的CSS顯示爲不可編輯的用戶代理，同時我也到顯示在線添加到我的CSS？
2. 「display：inline-block」如何解決問題？

注意：當鼠標懸停灰色Twitter的，它會觸發swap.js，改變圖標圖像以彩色之一，但在野生動物園，高亮顯示的圖標比灰度一個更大。我想我幾乎知道答案。只需要一個知道這背後所有問題的人。

謝謝！

Answer 1

解決方案： 要解決這個問題請確保您設置的高度和寬度圖像上，使得它不會加載過程中發生改變。

<img src="http://www.side.cr/images/contact/twitter_off.svg" 
    class="twitter_bird img_swap" height="52px" width="52px" /> 

或

.twitter_bird { 
    height:50px; 
    width:50px 
} 

說明： 當您切換圖像名稱，Safari瀏覽器開始加載圖像，但它不知道的高度或寬度，直到它完成下載。如果你設置高度和寬度，它不會從0px增加到52px。