简单的jQuery在Firefox中工作但不在Chrome中工作

Question

我有一个基本内容的简单div ...

<div id="slide"> ... </div>

以下代码适用于FireFox，但不适用于Chrome。我尝试访问.css（“width”）和其他属性，结果相同。

$(window).resize(function() {
  if( $(this).width() < 900) {
    alert( $("#slide").html() );
  }
});

知道为什么这不适用于Chrome？一个有趣的事情是这在两个方面都有效......

$(window).resize(function() {
  if( $(this).width() < 900) {
    $("#slide").hide();
  }
});

我的最终目标是访问/更改div中的子元素，但这不起作用，所以我尝试访问div本身进行健全检查......并且在Chrome中没有运气。

Answer 1

以下对我来说很好......

  

Chrome版本48.0.2564.116（64位）

var slide = $("#slide");

$(window).resize(function(){
    if($(this).width() < 900){
       alert(slide.html());
    }
})

Js Fiddle：https://jsfiddle.net/e28Lnv5t/1/

Answer 2

以下为我工作

HTML：

<p>Minimize the screen and look different</p>

<div id="slide">TEST</div>

CSS：

#slide{
  border: solid thin #bebebe;
}

JS

$(window).resize(function(){
    if($(this).width() < 900){
    $("#slide").hide();
  }
})