javascript - Internet Explorer 中的图片对齐是怎么回事？ (即和边缘)

Question

你好互联网上的好人，

我正在构建的网站出现问题。 我看到一些奇怪的行为，将图像对齐到元素的中心，同时还应用了平滑的“向上移动”动画。

它在 chrome 中完美居中，但在 internet explorer 和 edge 中不是。

我认为这与设置 CSS 属性 top: 0; 有关。因为如果我这样做，它也不会集中在 Chrome 中。

这是 jsfiddle。 https://jsfiddle.net/p4souo8d/2/

// project div animation on hover
$(".project").bind({
  mouseenter: function() {
    var image = $(this).find(".project-inner img"), projectInner = $(this).find(".project-inner");
    var bottomMargin = (projectInner.height() - image.height()) / 2;
    projectInner.fadeIn(400);
    image.animate({ bottom: Math.round(bottomMargin) }, 300);
  },
  mouseleave: function() {
    $(this).find(".project-inner").fadeOut(200).promise().done(function(){
      $(this).find("img").css({
        bottom: 0
      });
    });
  }
});

.project {
    width: 360px;
    height: 260px;
    background-color: #2C3E50;
    float: left;
    margin: 10px 15px;
    position: relative
}
.project .project-inner {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #3498DB;
    display: none
}
.project .project-inner img {
    width: 64px;
    height: 64px;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="project">
  <img src="http://lorempixel.com/360/260/" alt="" />
  <div class="project-inner">
    <img src="http://lorempixel.com/400/200" alt="Meer informatie" />
    <div class="project-information">
      Hello there! :)
    </div>
  </div>
</div>

附言对不起，图片是随机生成的。

Answer 1

这应该可行

.project .project-inner img {
width: 64px;
height: 64px;
position: absolute;
bottom: 0;
right: 0;
left: 0;
cursor: pointer;
margin: 0 auto;
}