javascript - 我的 jQuery 在 Chrome 中工作，但在 IE 11 中不工作

Question

下面是我的 HTML、CSS 和 jQuery。当您将鼠标悬停在方 block 上时，它应该以随机颜色突出显示方框内的方 block 。它在 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 将背景颜色属性报告为“透明”而不是“rgba(0, 0, 0, 0)”。在检查背景颜色是否为默认颜色时，尝试在您的 if 语句中使用以下子句:

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

fiddle 证明:http://jsfiddle.net/b64jLfqh/