Html WordPress中与浏览器相关的CSS专栏问题

当我经常使用WordPress开发时，我不会偶然发现与浏览器相关的问题，但我很难找到这种奇怪的原因，尽管Firefox/Edge存在简单的错误（使用Chrome可以正常工作；未在其他浏览器中测试）

网站：

在主页上，我们展示了几种产品。在最后一列中，3个产品应在同一行中对齐，第一个产品保持在右侧，另两个产品向下移动到新行。使用Chrome/Firefox的开发工具检查代码，这些产品中没有添加会导致问题的不同类或样式。错误似乎也只发生在更大的屏幕上，因此不是响应问题

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

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

希望你们能给我一些线索

---

谢谢

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

---

但是，修复方法是：使用

display:inline block

，而不是列表项的

float:left

，并将

ul

的宽度从

900px

更改为

908px

，以容纳内联块创建的额外空间

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

---

但是，修复方法是：使用

display:inline block

，而不是列表项的

float:left

，并将

ul

的宽度从

900px

更改为

908px

，以容纳内联块创建的额外空间

您的产品图像大小不同。这使得列表项的高度不同，布局混乱。保持图像大小不变，或者可以应用此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%;
}

---

您的产品图像大小不同。这使得列表项的高度不同，布局混乱。保持图像大小不变，或者可以应用此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%;
}

---

请在此处添加有意义的代码和问题描述。不要只是链接到需要修复的站点——否则，一旦问题解决或者你链接到的站点无法访问，这个问题将对未来的访问者失去任何价值。发布一个能证明你的问题的帖子会帮助你得到更好的答案。有关更多信息，请参阅“谢谢！”！请在此处添加有意义的代码和问题描述。不要只是链接到需要修复的站点——否则，一旦问题解决或者你链接到的站点无法访问，这个问题将对未来的访问者失去任何价值。发布一个能证明你的问题的帖子会帮助你得到更好的答案。有关更多信息，请参阅“谢谢！”！