FF和IE中的响应布局不合适

Question

如果您要在Chrome中查看以下网站，您会看到2行中的打印机。它应该是怎样的。但在FireFox和Internet Explorer中，第4个产品本身就是右边对齐的。

我已经尝试了所有我能想到的东西，并在网上搜索过。我真的很欢迎任何人可以帮助我解决这个问题。

http://www.thewideformatgroup.co.uk/Products/general-office-use

Answer 1

将项目（float: left）上的display: inline-block更改为.shop-main li，确切地说。

如果要浮动项目来执行此操作，则项目的高度必须完全相同。在这种情况下，项目以第三项略高于第二项的方式呈现。这导致第四项也在第二项旁边浮动。

如果有点夸张，它看起来像这样。注意3的高度略低，导致4也被卡在2后面。

这可能是由产品图像的奇怪缩放造成的，例如，或任何其他舍入差异。此外，它一开始可能看起来不错，但是一旦用户开始放大或缩小就会改变，或者用它们的字体设置混乱。

通过使用inline-block，您基本上可以创建一个长文本行的项目，这些项目将在行填满后立即换行。当你想要这样的项目包装列表时，这是一种更好的方法，因为你根本不会受到我上面提到的舍入问题的影响。

现在，您可能想要解决此舍入问题，因此每个块的大小都相同。而且你也可以这样做，因为当悬停时出现的红线移动一个像素左右时，它可能看起来有点奇怪。但是首先使用内联块，这样可以防止不正确的包装，所以即使出现一些不可预测的舍入错误，它们也只会详细显示并且不会弄乱整个页面。

Answer 2

您是否尝试过浮动元素或给它们相对定位？我看到它的方式是他们从父div继承他们的位置，但在ie和firefox上它的呈现方式不同。

我遇到了这个问题，我的解决办法就是让所有东西都浮动，并根据需要给它留出边距并清理，最终结果是它从顶部有一定的余量，所以元素总是留在距离顶部和彼此一定的距离，同时保持其位置

Answer 3

尝试将高度添加到.inner类：

.shop-product-small .inner {
border-bottom: 3px solid #FFFFFF;
height: 140px;

}