响应布局脱节在FF和IE(Responsive layout out of line in FF a

如果你看一下在Chrome下面的网站，你会看到两行的打印机。这是它是如何应该是。但在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 ，基本上你创建一个长的文本行的项目，将尽快换为线很全。这是一个更好的方法，当你想这样的项目的包装清单，因为你不会在所有的被我上面提到的四舍五入问题的影响。

现在，你可能会解决这个问题，四舍五入所以每块大小是一样的。你可能做到这一点为好，因为当悬停出现红线移动像素左右，它可能看起来有点怪。但是，通过使用inline-block的开始，所以你防止不正确的包装，因此，即使出现一些不可预知的舍入误差，他们只在表面细节，不会弄乱你的整个页面。

你有没有试图让元素浮动或给他们一个相对定位？我看到它的方式是，他们继承父DIV但在IE和Firefox浏览器呈现的不同立场。

我一直有这个问题，我的解决办法是让一切上浮左侧，并给它的利润和清算需要，最终的结果是，它有一定的余量从顶部，这样的元素永远停留在从一定距离顶部和对方，同时保持自己的位置

试着增加高度与.inner类：

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

}

文章来源: Responsive layout out of line in FF and IE