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

谢谢。这适用于Chrome和Safari，但会在Firefox上打破。 –

好的，我已经赞扬了包含float的答案：none;只针对Firefox浏览器 –

感谢科林，我已经标记你的答案是正确的。我是否总是使用该前缀，然后通过定制的CSS规则来定位Firefox？我如何定位Chrome和/或Safari？它可以帮助我 - - https://stackoverflow.com/q/46814877/3521315 –

答

从响应到一些这方面的帮助，我想通了 -

.staff .brick { 
     display: flex; 

}