Wordpress - Chrome / Safari问题，包括字体大小和图片布局

Question

我在网站上遇到了一些跨浏览器样式问题，我刚刚加载到wordpress html5blank子主题上。

例如，这是Chrome中显示的图片布局 -

这是在Firefox＆amp; Safari（应该如何看待） -

样式代码设置正确为display: inline-block;，但Chrome没有。

我在Safari和Chrome中也遇到了有关font-weight（显示比设置轻得多）和font-size（小于它应该是）的问题。是否有一些方法和/或插件可以阻止所有兼容性问题？

更新 -

我已将代码放在codepen here

上

Answer 1

在回答这个问题的帮助下，我明白了 -

.staff .brick {
       display: flex;

}

Answer 2

你只需要添加

.brick { float: left;}

我在你的代码笔中测试了它，当我检查元素float：left;由于某种原因而灰显了。然后我将上面的内容添加到您的代码中，并且它有效。

将此添加到目标firefox

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