CSS（WordPress）不同的圖像位置爲不同的瀏覽器

我有一個圖像鏈接過渡到另一個圖像，在Chrome，Edge，IE11都顯示正常。但是在Firefox中，一個單一的圖像被幾個px放錯位置。您可以在http://444.a91.myftpupload.com/上查看頁面。我在Chrome和Firefox上使用元素檢查器，CSS和CSS一樣，但對於我來說，我一直無法解決這個問題。CSS（WordPress）不同的圖像位置爲不同的瀏覽器

HTML圖像是在錯誤的位置：

<span id="zone-c"><a href="http://444.a91.myftpupload.com/projects/"> 
<img class="bottom" src="http://444.a91.myftpupload.com/wp-content/uploads/2016/12/see-the-work-center-hover.png" alt="" width="482" height="136"></a> 
<a href="http://444.a91.myftpupload.com/projects/"> 
<img class="top" src="http://444.a91.myftpupload.com/wp-content/uploads/2016/12/see-the-work-center.png" alt="" width="482" height="136"></a> 
</span>

CSS是與我搞亂：

.top, .bottom { 
    left: -15px; 
    top: 16px; 
}

來源

2017-03-27 Darth Schrader

通常，您不應該使用'position：absolute'和位置值手動對齊佈局。你應該嘗試像[Twitter Bootstrap]（http://getbootstrap.com），或者使用'float：left'和size來正確定位元素在自己的位置 – casraf

我@casraf同意。
它看起來像你使用Visual Composer。

無論如何，我認爲

.top, .bottom { 
    left: -15px; 
    margin-top: 16px; 
}

將解決您的問題。

來源

2017-03-27 17:10:18

你是對的@Murshid Ahmed我正在使用視覺作曲家。並感謝修復margin-top。我不相信我沒有想到，但它現在完美的工作！ –

很高興我能幫到你。如果你感到高興，請選擇作爲答案:) –

CSS（WordPress）不同的圖像位置爲不同的瀏覽器

回答

相關問題