WordPress的 - 谷歌瀏覽器/ Safari的問題，字體大小和圖像佈局

我有一個網站，我剛剛加載到一個WordPress的html5blank兒童主題的一些跨瀏覽器樣式問題。WordPress的 - 谷歌瀏覽器/ Safari的問題，字體大小和圖像佈局

例如，這裏是一個圖像佈局，因爲它是在Chrome中顯示 -

而且這是在Firefox & Safari瀏覽器（它應該是什麼樣子） -

樣式代碼正確設置爲display: inline-block;，但Chrome沒有。

我在Safari和Chrome瀏覽器中也遇到過有關字體重量（顯示比設置更輕）和字體大小（比應該更小）的問題。是否有一些方法和/或插件可以阻止所有兼容性問題？

更新 -

我放在一個codepen here

可我在網上看到的鏈接？ –

@SanjayPrajapati到什麼網站？它仍然在本地主機上。 –

哦@ Mike.Whitehead我會在解決方案後檢查 –

你只需要添加

.brick { float: left;}

我測試了它在你的代碼的筆，代碼，當我檢查的元件向左飄浮;出於某種原因灰色。然後，我只是將以上內容添加到您的代碼中，並且它工作正常。

加入這個目標的Firefox

@-moz-document url-prefix() { 
    .brick { 
     float: none; 
    } 
}

2017-10-18 17:27:17

謝謝。這適用於Chrome和Safari，但會在Firefox上打破。 –

好的，我已經讚揚了包含float的答案：none;只針對Firefox瀏覽器 –

感謝科林，我已經標記你的答案是正確的。我是否總是使用該前綴，然後通過定製的CSS規則來定位Firefox？我如何定位Chrome和/或Safari？它可以幫助我 - - https://stackoverflow.com/q/46814877/3521315 –

從響應到一些這方面的幫助，我想通了 -

.staff .brick { 
     display: flex; 

}

2017-10-18 18:39:21

回答