我的jQuery在Chrome中运行，但不是IE 11

Question

下面我有我的HTML，CSS和jQuery。当您将鼠标悬停在方框上时，它应该突出显示框内的方块。它在Chrome中没有问题，但在IE 11中不起作用。我对编码非常陌生，几周前就开始使用HTML，CSS和Javascript。谢谢，

//Document Startup
$(document).ready(function(){
  var divs = '#container div'
  var cSize = 960
  var cSizepx = cSize+'px'
  var divNum = 16
  var divSize = cSize/divNum
  var divSizepx = divSize+'px'
  var squares = divNum*divNum
  $('#container').css({'height':cSizepx,'width':cSizepx,'border':"1px solid black"})

  for (var x = 1; x <=squares; x++){
    $('#container').append('<div></div>')
  }
  $(divs).css({'height':divSizepx,'width':divSizepx})


  $(divs).hover(function(){
    var r = Math.floor((Math.random())*256)
    var g = Math.floor((Math.random())*256)
    var b = Math.floor((Math.random())*256)
    var color = 'rgb('+r+','+g+','+b+')'
    if ($(this).css("background-color") === 'rgba(0, 0, 0, 0)'){
      $(this).css("background-color", color);
    }
  })


  //Document after button press
  $(document).on('click','button',function(){
    $(divs).remove();
    var divNum = prompt("How many squares across would you like?")
    var divSize = cSize/divNum
    var divSizepx = divSize+'px'
    var squares = divNum*divNum
    for (var x = 1; x <=squares; x++){
      $('#container').append('<div></div>')
    }
    $(divs).css({'height':divSizepx,'width':divSizepx, 'display':'inline-block'})

    $(divs).hover(function(){
      var r = Math.floor((Math.random())*256)
      var g = Math.floor((Math.random())*256)
      var b = Math.floor((Math.random())*256)
      var color = 'rgb('+r+','+g+','+b+')'
      var count = parseInt($(this).data('count'), 10) + 1;
      ;

      if ($(this).css("background-color") === 'rgba(0, 0, 0, 0)'){
        $(this).css("background-color", color);
      }
    })

  })

});

#container div{
  float:right;
}

#container{	position:absolute;
  top:0px;
  display:inline-block;
}

#instructions{
  display:inline-block;
  position:absolute;
  top:80px;
  left:980px;
  font-family:cursive;
  width:205px;
  text-align:center;
}

button{
  position:absolute;
  left:980px;
  display:inline-block;
  top:10px;
  font-family:serif;
  font-size:3em;
  width:205px;
  background-color:#0186ea;
  color:white;
  border-radius:10px;
  border-width:0px;
  display:inline-block;
}
button:hover{
  background-color:#0192ea;
  border-radius:10px;
  border-width:0px;
}
button:active{
  background-color:#0186ea;
  border-radius:10px;
  border-width:0px;
}
button:visited{
  background-color:#0186ea;
  border-radius:10px;
  border-width:0px;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button>Reset</button>
<div id='instructions'>The button above will clear your space and set a new number of squares per line.</div>
<div id="container"></div>

Answer 1

IE将background-color属性报告为'transparent'而不是'rgba（0,0,0,0）'。在检查background-color是否为默认颜色时，请尝试在if语句中使用以下子句：

if ($(this).css("background-color") === 'rgba(0, 0, 0, 0)' || $(this).css('background-color') === 'transparent'){
  $(this).css("background-color", color);
}

提示证明：http://jsfiddle.net/b64jLfqh/