小编Jul*_*rog的帖子

我有一个带背景图片的div集:

<div>Play Video</div>

使用以下CSS:

div {
background-image: url('icon.png');
background-image: url('icon.svg'), none;
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: 90% 50%;
padding: 20px;
width: 150px;
}

背景大小在Firefox,Safari和Chrome中得到尊重.在IE8中,SVG由PNG文件替换.但是,在IE9和IE10中,SVG文件的大小很小.这个问题似乎与div的宽度和高度有关.如果我添加150px的高度,SVG将正确呈现.如果我把它缩小(即100px),图形就开始缩小.

有没有人找到办法在资源管理器中解决这个问题？有没有办法告诉IE使用背景大小值独立于div的宽度和高度？

我已将其div设置为position: relative。fixed当窗口顶部到达时它变为。div位于一个容器中（在下面的示例中为蓝色），我想将其设置回relative其父容器底部（蓝色）的位置。

这是我的代码简化和我的小提琴：

HTML：

<div class="green"></div>

<div class="blue">
  <div class="sticky">Sticky</div>
</div>

<div class="red"></div>

CSS：

.blue {
  background-color: blue;
  height: 500px;
}

.sticky {
  width: 200px;
  background-color: yellow;
  text-align: center;
  top: 0;
}

.red {
  background-color: red;
  height: 800px;
}

.green {
  background-color: green;
  height: 200px;
}

和jQuery：

$(document).ready(function() {
  var stickyTop = $('.sticky').offset().top;

  $(window).scroll(function() {
    var windowTop = $(window).scrollTop();

    if (stickyTop < windowTop) {
      $('.sticky').css('position', 'fixed');
    } else {
      $('.sticky').css('position', …