FF 和 IE 中的响应式布局不合时宜答案

【问题标题】：Responsive layout out of line in FF and IEFF 和 IE 中的响应式布局不合时宜
【发布时间】：2014-02-10 09:53:26
【问题描述】：

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

我已经尝试了我能想到的一切，并在网上搜索。我真的很欢迎任何人就这个问题给我任何帮助。

【问题讨论】：

在 IE11 中，当我禁用 ol 和 ul 元素以及其他一些样式（在产品项上）的列表样式属性时，事情就会正确对齐。我现在没有解决方案，但元素的嵌套也很深，这对我来说似乎没有必要。

【解决方案1】：

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

如果您浮动项目来执行此操作，则项目的高度需要完全相同。在这种情况下，项目以这样一种方式呈现，即第 3 个项目比第二个项目略低。这导致第四个项目也浮动在第二个项目旁边。

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

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

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

现在，您可能很想解决这个舍入问题，使每个块的大小都相同。你也可以这样做，因为当悬停时出现的红线移动一个像素左右时，它可能看起来有点奇怪。但是从使用 inline-block 开始，这样可以防止不正确的换行，所以即使发生一些不可预知的舍入错误，它们也只会显示细节，不会弄乱整个页面。

【讨论】：

【解决方案2】：

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

我遇到过这个问题，我的解决方案是让所有内容都向左浮动并根据需要为其设置边距和清除，最终结果是它与顶部有一定的边距，因此元素始终保持在与顶部和彼此保持一定距离，同时保持它们的位置

【讨论】：

【解决方案3】：

尝试为 .inner 类增加高度：

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

}

【讨论】：