macos - 仅在 Mac OS Safari 上出现 CSS 列布局问题

Question

我正在处理的 WordPress/WooCommerce 网站出现问题，网站主页上显示的产品的网格布局存在问题。截图如下:

正确的显示应该是这样的(Windows Chrome 浏览器):

只有在 Mac OS 上使用 Safari 查看站点时才会出现显示问题。但是，我没有 Mac，因此无法对此进行测试。

除了去一家 Currys 商店并使用我的移动热点之外，我完全被困住了。任何人都可以阐明可能导致此问题的原因并可能为我提供一些 CSS 代码来修复吗？

可以在这里看到网站:http://chickenguard.kinsta.com/

Answer 1

我可以在 1400 像素宽的屏幕上重现 Safari 中的错误。我找到了原因:样式表中有这个 CSS 规则:

.woocommerce.products-listing-grid .products.products-loop-column-3 > .product, 
.woocommerce.products-listing-grid .products.products-loop-column-3 > .product.last {
    width: 32%;
    margin-right: 2%;
}

如果我停用该规则中的 width: 32%;，width 变为 31.9%(在 .woocommerce .products.products-loop- 中定义) column-3 > .product 规则)，整个页面/产品网格看起来正确，就像在其他浏览器中一样。

所以我想您应该从该规则中删除该宽度设置，或者创建另一个覆盖它的规则。