1

ホバー時にDIVが拡大してから縮小し、「びくびく」または「ジッター」の外観になるこの問題を修正できないようです。これはIE 11でのみ発生するようで、その理由を特定できません。

画像用のリストがあり、ホバー状態を親よりも 10 ピクセル小さいブロックにしたい。

これが私のフィドルです：

これが私のコードです。

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

-1

私は IE 10 でテストしましたposition: absolute。したがって、それらは に揃えられますcontainer。itemこれをクラスに追加します。

.item {
  position: relative;
}

絶対要素は、そうでない次の親に揃えられstaticます。リスト要素の位置に関しては、IE のデフォルトのスタイルシートが他のブラウザーと異なる可能性があります。これはまだチェックしていません。

于 2013-10-21T08:10:50.270 に答える