Question

我似乎无法解决这个问题，在悬停时，DIV会扩展然后缩小，给出“跳跃”或“抖动”的外观。这似乎只发生在IE 11中，我无法确定原因。

我有一个将用于图像的列表，我希望悬停状态是比其父级小10px的块;

这是我的代码;

HTML

<div id="container">
<li class="item w2 h2"> <div class="inner"></div></li>
<li class="item w2 h2"> <div class="inner"></div></li>
<li class="item w2 h2"> <div class="inner"></div></li>
<li class="item w2 h2"> <div class="inner"></div></li>
<li class="item w2 h2"> <div class="inner"></div></li>
<li class="item w2 h2"> <div class="inner"></div></li>
</div>

CSS - 内部类是悬停

的内部类

#container {
  padding: 5px;
  margin: 0 auto;
  border: 2px solid black;
}

.item {
  display:block !important;
  list-style:none;
  float: left;
  background: #CCC;
  margin: 5px;
  width: 50px;
  height: 50px;
}
.item.w2 { width: 300px; }
.item.h2 { height: 200px; }

.inner {
    background:#fff;
    background: rgba(255, 255, 255, 1);
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
    margin:0;
    padding:0;
    text-align: center;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -ms-transition: opacity .4s ease-in-out;
    -o-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out;

}

.inner:hover  {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
    filter: alpha(opacity=95);
    opacity: .95;
    z-index:1;
}


/* no transition on .isotope container */

.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 1s;
     -moz-transition-duration: 1s;
          transition-duration: .6s;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
    opacity:.5;
}

因此，当没有过度转换或不透明等过渡时，“跳跃”或“抖动”就会消失。

感谢任何看过的人！任何建议都会很棒这对我来说是一个巨大的学习曲线：）

Answer 1

我创建了一个简单的问题示例：

http://jsfiddle.net/DqUvL/14/

我还向MSFT报告了这个问题：

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/107987/

HTML：

<a class="bad" href="#">
  <img src="http://placekitten.com/200/200" width="200" height="200" alt="cat">
  <div class="detail">
    <h2>Heading</h2>
    <div class="margin">
      Margin
    </div>
    <div class="clear"></div>
  </div>
</a><a class="bad" href="#">
  <div class="detail">
    <h2>Heading</h2>
    <div class="clear"></div>
  </div>
</a>

CSS：

.bad {
  display: block;
  outline: 1px solid blue;
}
.clear {
  clear: both;
}
.bad:hover {
  outline-color: red;
}
img {
  float:left;
}
h2 {
  margin: 0;
}
.margin {
  margin: 1em 0;
}

我通过在悬停元素周围添加容器样式=“溢出：隐藏”解决了这个问题：

http://jsfiddle.net/DqUvL/16/

这解决了简化问题。

谢谢@mohitp： https://stackoverflow.com/a/12665222/973470

Answer 2

我用IE 10测试过。看起来你的div太大了，因为他们有position: absolute。因此，它们与container对齐。将其添加到您的item班级：

.item {
  position: relative;
}

绝对元素与不是static的下一个父对齐。可能是IE的默认样式表与列表元素位置的其他浏览器不同。还没检查过。

使用Internet Explorer 11在DIV上进行抖动

2 个答案: