ブラウザの切り替えに関する問題Css3

Question

私は検索して解決策を見つけることができません。私は＃ゲームと呼ばれるIDを持つセクションがあり、次のリンク設定があります。

#games a { 
 
    opacity: 1.0; 
 
    filter: alpha(opacity = 100); 
 
    -o-transition: .5s; 
 
    -ms-transition: .5s; 
 
    -moz-transition: .5s; 
 
    -webkit-transition: .5s;  
 
    transition: .5s; 
 
} 
 

 
#games a:hover { 
 
    opacity: 0.6; 
 
    filter: alpha(opacity = 5); 
 
    -o-transition: .5s; 
 
    -ms-transition: .5s; 
 
    -moz-transition: .5s; 
 
    -webkit-transition: .5s;  
 
    transition: .5s; 
 
}

<section id="games"> 
 
    <a href="https://www.game.com" target="_blank"> 
 
     <div class="columns small-12 medium-6 large-3 col-pad"> 
 
      <img src="http://kurld.com/images/wallpapers/games-pictures/games-pictures-10.jpg"> 
 
      <h3>My Game Title</h3> 
 
      <dl class="clearfix"> 
 
       <dd>Gamename</dd> 
 
       <dd>Stats</dd> 
 
      </dl> 
 
     </div> 
 
    </a> 
 
</section>

それはMozillaで動作しますが、それはバグだらけの移行のように持っています。クロムやエクスプローラでは全く動作しません。私は基礎も使っています。私は基礎CSSを削除しましたが、影響はありませんでした。

Answer 1

aにdisplay:blockを使用して、それがaタグはインライン要素なので、これは動作します。 'a'要素の要素を調べると、その要素の中にある要素を囲んでいないことがわかります。

が、これはあなたがあなたが #game aに display:inline-blockを使用することができます

#games a { 
 
    display:block; 
 
    opacity: 1.0; 
 
    filter: alpha(opacity = 100); 
 
    -o-transition: .5s; 
 
    -ms-transition: .5s; 
 
    -moz-transition: .5s; 
 
    -webkit-transition: .5s;  
 
    transition: .5s; 
 
} 
 

 
#games a:hover { 
 
    opacity: 0.6; 
 
    filter: alpha(opacity = 5); 
 
    -o-transition: .5s; 
 
    -ms-transition: .5s; 
 
    -moz-transition: .5s; 
 
    -webkit-transition: .5s;  
 
    transition: .5s; 
 
}

<section id="games"> 
 
    <a href="https://www.game.com" target="_blank"> 
 
     <div class="columns small-12 medium-6 large-3 col-pad"> 
 
      <img src="images/games/myimage.jpg"> 
 
      <h3>My Game Title</h3> 
 
      <dl class="clearfix"> 
 
       <dd>Gamename</dd> 
 
       <dd>Stats</dd> 
 
      </dl> 
 
     </div> 
 
    </a> 
 
</section>

Answer 2

私はあなたのtransition文がfadeパラメータが不足していると思う - 試してみてください。

transition: opacity .5s ease-in-out; 

Answer 3

を探していたものであるなら、私に知らせてください。元の記事に私のコメントからフォローアップ

#games a { 
 
    opacity: 1.0; 
 
    filter: alpha(opacity = 100); 
 
    -o-transition: .5s; 
 
    -ms-transition: .5s; 
 
    -moz-transition: .5s; 
 
    -webkit-transition: .5s;  
 
    transition: .5s; 
 
    display:inline-block; 
 
} 
 

 
#games a:hover { 
 
    opacity: 0.6; 
 
    filter: alpha(opacity = 5); 
 
    -o-transition: .5s; 
 
    -ms-transition: .5s; 
 
    -moz-transition: .5s; 
 
    -webkit-transition: .5s;  
 
    transition: .5s; 
 
}

<section id="games"> 
 
    <a href="https://www.game.com" target="_blank"> 
 
     <div class="columns small-12 medium-6 large-3 col-pad"> 
 
      <img src="images/games/myimage.jpg"> 
 
      <h3>My Game Title</h3> 
 
      <dl class="clearfix"> 
 
       <dd>Gamename</dd> 
 
       <dd>Stats</dd> 
 
      </dl> 
 
     </div> 
 
    </a> 
 
</section>

Answer 4

だから、いくつかの問題。

最初：アンカーは本質的にインライン要素です。インライン要素の中にブロック要素を配置することはできませんので、これは他の答えが出現する場所です（アンカーをinline-blockまたはblockにする）。

第2：プロパティを変更していない限り、ホバー上のトランジションを再定義する必要はありません。 :hoverはより具体的なセレクタですが、その要素の他のスタイルは無効になりません。おそらく、あなたのアプリケーションの振る舞いをニーズに合わせて調整したり、スタイルをより読みやすくするために、トランジション関数を明示的に追加するべきでしょう。

第3：不透明度がuniversally supported after IE8なので、実際にはfilterは必要ありません。これは、フィルタによって異なる不透明度が指定されているため、特に不整合な動作につながります。

第4回：トランジションもwidely supportedです。あなたが本当に必要とする唯一のプレフィックスは-webkit-であり、それはほとんどの場合実際にはほとんど必要ありません。

更新されたコード：

#games a { 
 
    display: block; 
 
    opacity: 1.0; 
 
    
 
    -webkit-transition: opacity .5s ease; 
 
      transition: opacity .5s ease; 
 
} 
 

 
#games a:hover { 
 
    opacity: 0.6; 
 
}

<section id="games"> 
 
    <a href="https://www.game.com" target="_blank"> 
 
     <div class="columns small-12 medium-6 large-3 col-pad"> 
 
      <!-- This image is dead anyway, so I'm commenting it out for now --> 
 
      <!-- <img src="http://kurld.com/images/wallpapers/games-pictures/games-pictures-10.jpg"> --> 
 
      <h3>My Game Title</h3> 
 
      <dl class="clearfix"> 
 
       <dd>Gamename</dd> 
 
       <dd>Stats</dd> 
 
      </dl> 
 
     </div> 
 
    </a> 
 
</section>