1

我似乎无法解决这个问题，在悬停时，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;
}

因此，当没有诸如缓入出或不透明之类的过渡时，“跳跃”或“抖动”就会消失。

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

4

2 回答 2

0

我创建了这个问题的简化示例：

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;
}

我通过在悬停元素周围添加一个容器 style="overflow:hidden"来解决这个问题：

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

这解决了简化的问题。

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

于 2014-01-20T19:02:22.703 回答
-1

我用 IE 10 测试过。似乎你的 div 太大了，因为它们有position: absolute. 因此它们与container. 将此添加到您的item课程中：

.item {
  position: relative;
}

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

于 2013-10-21T08:10:50.270 回答