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

【问题标题】：Wordpress - Chrome / Safari issues with font size and image layoutWordpress - 字体大小和图像布局的 Chrome / Safari 问题
【发布时间】：2018-03-30 05:37:12
【问题描述】：

我刚刚加载到 wordpress html5blank 子主题的网站存在一些跨浏览器样式问题。

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

这是在 Firefox 和 Safari 中（它应该看起来如何） -

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

我在 Safari 和 Chrome 中也有关于字体粗细（显示比设置的轻得多）和字体大小（比它应该小）的问题。是否有一些方法和/或插件可以阻止所有兼容性问题？

更新 -

我已将代码放在密码笔here

【问题讨论】：

我可以看到在线链接吗？
@SanjayPrajapati 到什么网站？它仍然在本地主机上。
哦@Mike.Whitehead 我会在解决后检查
你能在 jsfiddle.net 中复制吗？
@msbodetti 我已经为答案添加了一个 codepen 链接。这可能是砌体柱规则，但为什么它只能在 chrome 上而不是 safari 和 firefox 上这样做？

标签： css wordpress google-chrome compatibility

【解决方案1】：

你只需要添加

.brick { float: left;}

我在您的代码笔中对其进行了测试，当我检查元素时 float: left;由于某种原因变灰了。然后我只是将以上内容添加到您的代码中，并且它起作用了。

将此添加到目标 Firefox

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

【讨论】：

谢谢。这适用于 Chrome 和 Safari，但在 Firefox 上会中断。
好的，我已将答案修改为包括 float: none;仅针对 firefox 浏览器
感谢 Colin，我已将您的答案标记为正确。我是否总是使用该前缀来使用定制的 CSS 规则来定位 Firefox？如何定位 Chrome 和/或 Safari？这可能对我有帮助 - stackoverflow.com/q/46814877/3521315
谢谢@Mike.Whitehead 您不应该总是只在遇到冲突问题时才需要使用该前缀。
对于 Chrome 和 Safari 我相信这会起作用 @media screen 和 (-webkit-min-device-pixel-ratio:0) { .brick { float: left; } }

【解决方案2】：

在对此的回复的帮助下，我想通了 -

.staff .brick {
       display: flex;

}

【讨论】：