Css Wordpress-Chrome/Safari字体大小和图像布局问题

我刚刚加载到wordpress HTML5 blank子主题的网站出现了一些跨浏览器样式问题

例如，这是一个在Chrome中显示的图像布局-

这就是Firefox和Safari（它应该是什么样子的）——

样式代码正确设置为

display:inline块但Chrome没有

我在Safari和Chrome中也有关于字体重量（显示的比设置的要轻）和字体大小（比应该的小）的问题。是否有某种方法和/或插件可以阻止所有兼容性问题

更新-

我已将代码放在代码笔上，您只需添加

.brick { float: left;}

我在你的代码笔中测试了它，当我检查元素float时：left；由于某种原因，它变灰了。然后我把上面的代码添加到你的代码中，它就成功了

将此添加到目标firefox

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

在回答这些问题的帮助下，我找到了答案-

.staff .brick {
       display: flex;

}

我能看到在线链接吗？@SanjayPrajapati到什么网站？它仍然在localhost.oh@Mike.Whitehead上，解决方案完成后我会检查它。你能在jsfiddle.net中复制吗？@msbodetti我在答案中添加了一个代码笔链接。这可能是砖石柱规则，但为什么它只能在chrome上使用，而不能在safari和firefox上使用呢？谢谢。这适用于Chrome和Safari，但在Firefox上会中断；仅针对firefox浏览器Hanks Colin，我已将您的答案标记为正确。那么，我是否总是使用这个前缀来针对firefox定制CSS规则？如何瞄准Chrome和/或Safari？这可能会对我有所帮助-谢谢@Mike.Whitehead你不应该总是在有冲突问题时才使用前缀。对于Chrome和Safari，我相信这会在@media screen和（-webkit-min-device-pixel ratio:0）{.brick{float:left；}