在IE8中重叠onLoad的jQuery同位素项 - 定义宽度列表项，而不是图像

Question

Isotope重叠项目的问题已有详细记录，但似乎其他人只是使用图像，并且使用$(window).load(function(){ ..... });或imagesLoaded插件解决了他们的问题。

我发现所有浏览器都能正常工作，除了我遇到重叠的IE8。 这个问题只有onload;如果我点击任何过滤器样式是正确的。但我已经尝试将我的脚本包装在$(window).load(function(){ ..... });中，但它不起作用！

当我使用IE检查器时，似乎Isotope正在计算的宽度在IE8中是80px关闭。

这些位于<ul>中，而<li>的定义位置为349px。在Chrome中，当我使用检查器时，我可以看到它在<li>元素的内联样式中添加了正确的宽度379px（这是349px宽度+ 30px左边距）：

position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(379px, 0px, 0px);

但是，在IE8中，它添加了以下内联样式：

left: 299px; top: 0px; position: absolute;

其他CSS详细信息：

• 每个项目左侧的边距为 30px
• 容器<ul>的负余量为 -30px 以升级网格
• 填充设置在<li>内的元素上，并且 20px
• 图片的宽度定义为75px

我无法理解为什么它与80px的重叠或如何阻止它！让我疯了。

有任何帮助吗？我想写一个小提琴来展示这个但是与jsfiddle和IE8挣扎，即使使用jsfiddle.net/draft /.

Answer 1

如果有人遇到这个风滚草问题，我最终不得不使用％widths来解决这个问题，因为我的媒体查询导致了这个问题。

实际上，媒体查询问题似乎只发生在IE8中，因此我专门针对使用％widths的样式定位该浏览器。