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

Question

我在与我工作的一个WordPress / WooCommerce网站，其中有一个与在网站首页显示的产品的网格布局的一个问题一个问题。下面的截图：

正确的显示应该像这样（的Windows的Chrome浏览器）：

只有观看的Safari在Mac OS上的网站时出现的显示问题。不过，我不拥有一台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规则定义），整个网页/产品的网格看起来是正确的，就像在其他浏览器。

所以我想您应该删除从规则宽度设置或创造出其覆盖其他规则。