Chrome element.style 截断图像答案

【问题标题】：Chrome element.style cutting off imagesChrome element.style 截断图像
【发布时间】：2015-07-28 17:54:31
【问题描述】：

正如您在图片中看到的那样，Chrome 将所选 div 的高度调整为 55px。这是 element.style 我认为它是由脚本计算并插入到 html 中的。 55px 不正确，因为它会切断图像，所以我想将其设为 305px。奇怪的是，这只发生在 Chrome 中并且适用于 IE 和 Firefox。另外，当我在我的计算机上的 Chrome 中本地处理 html 页面时，它不会发生。我尝试使用 !important 覆盖 55px CSS 规则，但这没有任何作用。我清除了浏览器缓存/cookie 并重新上传了文件，但什么也没有。当您将浏览器窗口变小然后再次全屏时，Chrome 似乎会自行更正并正确显示。任何帮助表示赞赏。

【问题讨论】：

您能分享整个代码或提供该网站的链接吗？
ambrite.ca 是网站。您可能需要刷新页面。大约 90% 的时间都会出现这个问题。
我能够在 FF 上重现该问题。我收到此错误Uncaught TypeError: $(...).niceScroll is not a function。我会将你的 main.js 脚本移动到 nicescroll.js 之后加载。也许这个错误把事情搞砸了。
实际上问题是同位素在图像加载之前试图调整 dom 对象的高度。请参阅我的答案中的解决方案。

标签： javascript css google-chrome developer-tools

【解决方案1】：

在 /js/main.js 文件中

更改此代码：

$container.isotope({
    itemSelector: '.isotopeItem',
    resizable: false, // disable normal resizing
    masonry: {
        columnWidth: $container.width() / $resize
    }
});

收件人：

$container.imagesLoaded( function() {
    $container.isotope({
        itemSelector: '.isotopeItem',
        resizable: false, // disable normal resizing
        masonry: {
            columnWidth: $container.width() / $resize
        }
    });
});

这有望使同位素等待图像加载。

编辑：Imagesloaded 不再包含在最新版本的同位素中。你有一个包含 Imagesloaded 的旧版本，但如果你要升级到新版本，你将不得不使用这个：http://imagesloaded.desandro.com/

【讨论】：

效果很好，我喜欢新动画，谢谢！