响应式布局不在FF和IE中 [英] Responsive layout out of line in FF and IE

问题描述

如果您在Chrome浏览器中查看以下网站，则会看到两排打印机。这应该是怎样的。但是在FireFox和Internet Explorer中，第四个产品本身就是对齐的。

我尝试了所有我能想到的，并且搜索网页的东西。我非常欢迎任何人可以就此问题给予我任何帮助。

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

解决（ display：inline-block ）将 float：left 更改为 c $ c> .shop-main li ，确切地说）。

如果您浮动物品来完成此操作，则物品的高度需要完全相同。在这种情况下，项目以第三项略低于第二项的方式呈现。这导致第四个项目在第二个项目旁边浮动。

如果夸大了一点，它看起来像这样。请注意3如何略微偏低，导致4被卡在2之后。

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

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

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

If you were to look at the following website in Chrome, you would see the printers in 2 rows. Which is how it is supposed to be. But in FireFox and Internet Explorer the 4th product is aligned on the right by itself.

I have tried everything I can think of, and scoured the web. I would really welcome any help anybody can give me regarding this issue.

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

解决方案

Change float: left to display: inline-block on the items (.shop-main li, to be exact).

If you float items to do this, then the height of the items needs to be exactly the same. In this case, the items are rendered in such a fashion that the 3rd item is slightly less high than the second. That is causing the fourth item to float next to the second as well.

If a bit exaggerated, it looks like this. Notice how 3 is slightly less high, causing 4 to be stuck behind 2 as well.

This might be caused by a weird scaling of the product image, for instance, or by any other rounding difference. Also, it might look good at first, but change as soon as a user starts zooming in or out, or messes with their font settings.

By using inline-block, you basically create a long text-line of items, that will wrap as soon as the line is full. It is a better approach when you want a wrapping list of items like this, because you won't at all be affected by the rounding problems I mentioned above.

Now, you might be tempted to solve this rounding issue so every block is the same size. And you might do that as well, because it might look a bit weird when the red line that appears on hover is shifted a pixel or so. But start by using inline-block, so you prevent incorrect wrapping, so even if some unpredictable rounding errors occur, they surface only in detail and won't mess up your entire page.

这篇关于响应式布局不在FF和IE中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！