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

Posted 2023-03-06

【中文标题】Wordpress - 字体大小和图像布局的 Chrome / Safari 问题

【英文标题】：Wordpress - Chrome / Safari issues with font size and image layout

【发布时间】：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 上这样做？

【参考方案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？这可能对我有帮助 - ***.com/q/46814877/3521315

谢谢@Mike.Whitehead 您不应该总是只在遇到冲突问题时才需要使用该前缀。

对于 Chrome 和 Safari 我相信这会起作用 @media screen 和 (-webkit-min-device-pixel-ratio:0) .brick float: left;

【参考方案2】：

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

.staff .brick 
       display: flex;