如果您要在Chrome中查看以下网站，则会看到打印机分为两行。应该是这样的。但是在FireFox和Internet Explorer中，第四个产品本身就与右边对齐。
我已经尝试了所有可以想到的内容，并在网上进行搜索。我真的很欢迎任何人就此问题提供任何帮助。
http://www.thewideformatgroup.co.uk/Products/general-office-use
最佳答案
将项目上的float: left更改为display: inline-block（确切地说，是.shop-main li）。
如果要浮动项目，则项目的高度必须完全相同。在这种情况下，项目的渲染方式应使第三个项目的高度略低于第二个项目。这导致第四项也漂浮在第二项之后。
如果有点夸张，它看起来像这样。请注意3的高度略低，导致4也卡在2的后面。
例如，这可能是由于产品图片的缩放比例怪异，或者是由其他舍入差异引起的。同样，乍一看可能看起来不错，但是一旦用户开始放大或缩小，或者字体设置混乱，它就会改变。
通过使用inline-block，您基本上创建了一个长的项目文本行，该行将在行满时立即换行。当您想要包装这样的项目清单时，这是一种更好的方法，因为您完全不会受到我上面提到的舍入问题的影响。
现在，您可能很想解决此舍入问题，因此每个块的大小均相同。您也可以这样做，因为当悬停时出现的红线移动大约一个像素时，它看起来可能有点怪异。但是从使用inline-block开始，这样可以防止错误的换行，因此即使发生一些不可预测的舍入错误，它们也只会详细显示，不会弄乱整个页面。
关于html - FF和IE中的响应式布局脱节，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21673861/