Question

当我经常使用WordPress开发时，我没有偶然发现与浏览器相关的问题，但我很难找到这个奇怪的原因，虽然Firefox / Edge的简单错误（与Chrome一起工作正常;没有在其他浏览器中测试过。）

网站：http://stitchwear.com.br/

在主页中，我们展示了几款产品。在最后一列中，3个产品应在同一行中对齐，第一个产品停留在右侧，另外两个产品停留在新行。使用Chrome / Firefox中的开发人员工具检查代码时，这些产品中没有添加任何可能导致此问题的类别或样式。错误似乎也只发生在更大的屏幕上，因此不是响应问题。

所有产品都使用CSS中的无序列表左对齐，每个产品的固定宽度为300px，ul标签的固定宽度为900px。 li元素没有边距或填充。

由于我没有找到这种与浏览器相关的问题，我不知道在哪里看。我没有开发这个网站，但我正在努力解决这个问题。它也不使用Bootstrap。

希望你们能给我一些线索。

谢谢！

Answer 1

FWIW，我在Chrome和FF中加载了页面，FF肯定搞砸了列表，我不知道为什么。我试图创建一个MCVE演示它，但没有成功。

但是，修复方法是：代替float:left列表项，使用display:inline-block，并将ul的宽度从900px更改为908px容纳内联块创建的额外空间。

Answer 2

您的商品图片尺寸不同。这使得列表项高度不同，布局混乱。保持图像大小相同，或者您可以应用此CSS。

.product-thumbnail {
    overflow: hidden;
    position: relative;
}
.product-thumbnail::before {
    content: "";
    display: block;
    padding-top: 133.33%;
}
.product-thumbnail img {
    position: absolute;
    top: 0;
    width: 100%;
}

WordPress中与浏览器相关的奇怪CSS列问题

2 个答案: