图片库预览无法在 Chrome 和 Safari 中正确显示答案

【问题标题】：Image gallery preview not displaying correctly in Chrome and Safari图片库预览无法在 Chrome 和 Safari 中正确显示
【发布时间】：2013-10-18 22:52:10
【问题描述】：

我制作了一个图片库，您可以在其中单击图片以显示更大的版本。单击图像时，将在下面的行中插入新图像。我遇到了一个错误，我不知道如何解决它。例如，如果您单击第一行的图像，则会显示图像的预览。然后，如果您单击下面两行的图像，则不会显示图像预览。它不适用于 Chrome 和 Safari。在 Firefox 中效果很好。

这是我使用的 Javascript 和 jQuery(2.0.3)：

$(document).on("click", ".imgBox", function(){
    imgsrc = $(this).find('img').attr('src');
    var bigBox = $('<div class="bigBox"><img src="'+imgsrc+'"/></div>');
    imgClicked = $(this);
    $('.bigBox').remove()
    if ($(".bigBox").length > 0){

            bigBox.find('img').attr('src', imgsrc);
            bigBox.insertAfter(imgClicked);
    } else {
            bigBox.insertAfter(imgClicked).css('display', 'block');
    }


});

我创建了一个JSFiddle，以便您自己尝试。只需确保调整浏览器窗口的大小，以便获得至少 3 行。

我已经在 OSX 上的 Chrome 30.0.1599.101、Safari 6.0.5 和 Firefox 24.0 中对其进行了测试。

【问题讨论】：

如果您在px 中的.bigBox 中指定width 而不是%，这会不会是一个交易者？我在 CSS 中进行了一些调整，在我看来问题就在那里。
这很奇怪。如果你调整它出现的 jsfiddle 窗口的大小）

标签： javascript jquery html css google-chrome

【解决方案1】：

警告：这个解决方案有点骇人听闻。 :)

我注意到当我调整 jsfiddle 窗口的大小时，chrome 会显示此图像，正如我所说的 in the comment。于是我开始尝试“愚弄”chrome再次重绘的方法。有many ways that cause a repaint。我选择操纵style 属性。

所以我创建了一个简单的检查，将overflow 属性从auto 动态设置为visible（这两个值都不应破坏您的布局。当用户单击图像时，我会切换这些值。就像这样： http://jsfiddle.net/HeQGL/5/

附：请注意，我稍微更改了您的脚本。更改了事件监听器的元素，在函数内部使用了变量，并使用了 .detach() 而不是 .remove()，因为当我们需要将元素重新插入 DOM 时，它更适合。

【讨论】：

【解决方案2】：

我在 Windows 上的 Chrome 30.0.1599.101 m 中对其进行了测试，效果非常好。

【讨论】：