Question

这是一个奇怪的问题，一直困扰着我一段时间。我怀疑这是一个只在最新版本中出现的问题，因为我现在才注意到它。

我为我的客户创建了一个网站，该网站使用浏览器大小感知网格，无论是浮动div还是图像大小。

如果您打开网站here和here（ps还没有'实时'，只是将它发送到根目录）在Safari或FF中更改浏览器的大小，您会发现它可以完美地平滑图像，并且尺寸很柔和。

使用Chrome，它就像是2002年的IE6派对......它很跳跃，图像甚至没有平滑。让我感到非常失望，因为我喜欢Chrome，而且当涉及到这些细节时，alwasy似乎打败了其他人。

我确定这是一个浏览器错误，但我希望有一个jQuery专家可能知道一种方法来缓和Chromes的输出。

另一方面，提交一个chrome bug就像进入一个复杂的迷宫，我不知道正确地提交这样一个错误的地方，任何人都知道如何以最好的方式解决这个问题所以它得到了正确的关注？

Answer 1

对我来说，这似乎是一个Chrome错误。作为替代方案，您可以尝试使用CSS3媒体查询（由所有主要浏览器的最新版本支持;不知道是否会导致问题）这里记录了它们：http://www.w3.org/TR/css3-mediaqueries/，示例在这里：http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html

Answer 2

我可以帮助你。我刚刚为我的投资组合网站解决了同样的问题。看起来Chrome在这一方面略胜一筹。不太确定这是不是一个错误，但我找到了修复。

当您调整视图端口的大小时，抓取函数中的窗口宽度和执行函数之间的时间足以使实际窗口大小小于加起来的数学运算（4列，110.25像素）在一个440像素宽的窗口中）。额外的像素会导致列包裹。

那么修复？

在包围容器（列的最大宽度）上，设置父元素的宽度。通过在调整大小时执行此操作（而不仅仅是抓取窗口大小然后设置列的宽度），它可以让数学赶上正确的窗口大小。

这是一个JS小提琴演示：http://jsfiddle.net/Lr2Fh/

JS：

 $(function(){
  var maxWidth = $(window).outerWidth();

  function totalWindow(){
    $maxWidth = $(window).outerWidth();
    $('#columns').css({
      'width' : $maxWidth + 'px'
    });
  }

  function resizeColumns(){
    var $col = $('.col');
    var $numCol = $col.length;
    $maxWidth = $(window).outerWidth();
    var colSize = $maxWidth / $numCol;

    $col.css({
      'width' : colSize + 'px'
    })
  }

  totalWindow();
  resizeColumns();

  $(window).resize(function() {
      totalWindow();
      resizeColumns();
  });
});

HTML：

<div id="columns">
    <div class="col"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere viverra porttitor. Curabitur eu libero id dui adipiscing accumsan vitae nec mauris. Nunc mi odio, fermentum pharetra pulvinar eget, laoreet id odio. Fusce sed est eget neque porta consequat tristique ut metus. Nunc lectus lorem, ultricies non hendrerit rhoncus, venenatis volutpat velit. Nulla mollis laoreet dignissim. Morbi venenatis lacinia lacinia. Vivamus molestie, neque a viverra vehicula, libero sem volutpat risus, at dignissim risus neque non turpis. Vivamus mollis placerat massa id fringilla. Praesent erat dui, sodales quis placerat commodo, pharetra eget diam. Proin at lorem at felis imperdiet ornare. Integer ullamcorper feugiat dui eu pharetra. Aliquam quis purus sed turpis lobortis scelerisque ac ut magna. Integer vel varius magna.</p></div>
    <div class="col"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere viverra porttitor. Curabitur eu libero id dui adipiscing accumsan vitae nec mauris. Nunc mi odio, fermentum pharetra pulvinar eget, laoreet id odio. Fusce sed est eget neque porta consequat tristique ut metus. Nunc lectus lorem, ultricies non hendrerit rhoncus, venenatis volutpat velit. Nulla mollis laoreet dignissim. Morbi venenatis lacinia lacinia. Vivamus molestie, neque a viverra vehicula, libero sem volutpat risus, at dignissim risus neque non turpis. Vivamus mollis placerat massa id fringilla. Praesent erat dui, sodales quis placerat commodo, pharetra eget diam. Proin at lorem at felis imperdiet ornare. Integer ullamcorper feugiat dui eu pharetra. Aliquam quis purus sed turpis lobortis scelerisque ac ut magna. Integer vel varius magna.</p></div>
    <div class="col"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere viverra porttitor. Curabitur eu libero id dui adipiscing accumsan vitae nec mauris. Nunc mi odio, fermentum pharetra pulvinar eget, laoreet id odio. Fusce sed est eget neque porta consequat tristique ut metus. Nunc lectus lorem, ultricies non hendrerit rhoncus, venenatis volutpat velit. Nulla mollis laoreet dignissim. Morbi venenatis lacinia lacinia. Vivamus molestie, neque a viverra vehicula, libero sem volutpat risus, at dignissim risus neque non turpis. Vivamus mollis placerat massa id fringilla. Praesent erat dui, sodales quis placerat commodo, pharetra eget diam. Proin at lorem at felis imperdiet ornare. Integer ullamcorper feugiat dui eu pharetra. Aliquam quis purus sed turpis lobortis scelerisque ac ut magna. Integer vel varius magna.</p></div>
    <div class="col"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere viverra porttitor. Curabitur eu libero id dui adipiscing accumsan vitae nec mauris. Nunc mi odio, fermentum pharetra pulvinar eget, laoreet id odio. Fusce sed est eget neque porta consequat tristique ut metus. Nunc lectus lorem, ultricies non hendrerit rhoncus, venenatis volutpat velit. Nulla mollis laoreet dignissim. Morbi venenatis lacinia lacinia. Vivamus molestie, neque a viverra vehicula, libero sem volutpat risus, at dignissim risus neque non turpis. Vivamus mollis placerat massa id fringilla. Praesent erat dui, sodales quis placerat commodo, pharetra eget diam. Proin at lorem at felis imperdiet ornare. Integer ullamcorper feugiat dui eu pharetra. Aliquam quis purus sed turpis lobortis scelerisque ac ut magna. Integer vel varius magna.</p></div>
    <div class="col"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere viverra porttitor. Curabitur eu libero id dui adipiscing accumsan vitae nec mauris. Nunc mi odio, fermentum pharetra pulvinar eget, laoreet id odio. Fusce sed est eget neque porta consequat tristique ut metus. Nunc lectus lorem, ultricies non hendrerit rhoncus, venenatis volutpat velit. Nulla mollis laoreet dignissim. Morbi venenatis lacinia lacinia. Vivamus molestie, neque a viverra vehicula, libero sem volutpat risus, at dignissim risus neque non turpis. Vivamus mollis placerat massa id fringilla. Praesent erat dui, sodales quis placerat commodo, pharetra eget diam. Proin at lorem at felis imperdiet ornare. Integer ullamcorper feugiat dui eu pharetra. Aliquam quis purus sed turpis lobortis scelerisque ac ut magna. Integer vel varius magna.</p></div>
</div>

CSS

#columns {
position:absolute;
}

#columns .col {
position: relative;
float:left;
zoom:1;
}

Chrome - jQuery闪烁在窗口调整大小？（Mac，不在Safari和FF中）

2 个答案:

Chrome - jQuery闪烁在窗口调整大小？ （Mac，不在Safari和FF中）

2 个答案:

Chrome - jQuery闪烁在窗口调整大小？（Mac，不在Safari和FF中）