CSS列布局问题仅在Mac OS Safari上

Question

我正在使用的WordPress / WooCommerce网站出现问题，因此网站首页上显示的产品的网格布局存在问题。下面的屏幕截图：

正确的显示应如下所示（Windows Chrome浏览器）：

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

除了进入Currys商店并使用我的移动热点外，我还很困。谁能弄清楚是什么原因造成的，并可能为我提供一些CSS代码来解决？

可以在此处查看该网站：http://chickenguard.kinsta.com/

Answer 1

我可以在1400px宽屏上的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规则中定义），并且整个页面/产品网格看起来都是正确的，例如其他浏览器。

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