CSS3ブラウザの互換性

Question

このpageのCSS3トランジションエフェクトは、IE以外のすべてのブラウザで正常に動作します。また、サムネールの上部と左側に境界線を追加します。私はすべての要素の境界を0にしようとしましたが、それでも助けにはなりませんでした。 CSSは以下の通りです。

.slide-up-boxes .showbox a { 
    display: block; 
    margin: 0 0 20px; 
    height: 157px; 
    overflow: hidden; 
    width: 315px; 
    float: left; 
    border:none; 
    padding: 0px; 
    background: transparent; 
     } 

     .slide-up-boxes .showbox img { 
      color: #333; 
      text-align: center; 
      margin-right: 15px; 
      width: 315px; 
      float: left; 
      height: 157px; 
      font: italic 18px/65px Georgia, Serif; /* Vertically center text by making line height equal to height */ 
      zoom: 1; 
      filter: alpha(opacity=45); 
      opacity: 0.5; 
      -webkit-transition: all 0.2s linear; 
      -moz-transition: all 0.2s linear; 
      -o-transition: all 0.2s linear; 
     } 

    .showbox a:hover img { 
      margin-top: -155px; 
      opacity: 0; 
      height: 157px; 
      width: 315px; 

     } 

     .showbox object { 
    color: white; 
    background: #393838; 
    font: 12px/15px Georgia, Serif; 
    opacity: 0; 
    -webkit-transform: rotate(6deg); 
    -webkit-transition: all 0.4s linear; 
    -moz-transform: rotate(6deg); 
    -moz-transition: all 0.4s linear; 
    -o-transform: rotate(6deg); 
    -o-transition: all 0.4s linear; 
    width: 314px; 
    float: left; 
    height: 154px; 
    border: none; 
    padding: 0px; 
    margin: 0px 15px 0px 0px; 
     } 
     .slide-up-boxes .showbox a:hover object { 
      opacity: 1; 
      width: 314px; 
      border: none; 
      -webkit-transform: rotate(0); 
      -moz-transform: rotate(0); 
      -o-transform: rotate(0); 
      zoom: 1; 
     } 
    .slide-up-boxes .showbox#show1 object { 
    background: url(images/huethumb.jpg) ; 
    padding-top: 110px; zoom: 1; 
    border: none; 

    } 
    .slide-up-boxes .showbox#show2 object { 
    background: url(images/pizzathumb.jpg) ; 
    padding-top: 110px; zoom: 1; 
    border: none; 

    } 
    .slide-up-boxes .showbox#show3 object { 
    background: url(images/rickolthumb.jpg) ; 
    padding-top: 110px; 
    border: none; 

    } 
    .slide-up-boxes .showbox#show4 object { 
    background:url(images/bernie-thumber.jpg) ; 
    padding-top: 110px; zoom: 1; 
    background-repeat: no-repeat; 
    border: none; 

    } 
    .slide-up-boxes .showbox#show5 object { 
    background: url(images/nollythumb.png) ; 
    padding-top: 110px; zoom: 1; 
    border: none; 

    } 
    .slide-up-boxes .showbox#show6 object { 
    background:url(images/photothumg.jpg) ; 
    padding-top: 110px; zoom: 1; 
    border: none; 

    } 
    .slide-up-boxes .showbox#show7 object { 
    background:url(images/tradersthumb.png) ; 
    padding-top: 110px; zoom: 1; 
    border: none; 

    } 
    .slide-up-boxes .showbox#show8 object { 
    background:url(images/wpbathumb.jpg); 
    padding-top: 110px; zoom: 1; 
    border: none; 

    } 
    .slide-up-boxes .showbox#show9 object { 
    background:url(images/peterthumb.png); 
    padding-top: 110px; 
    zoom: 1; 
    border: none; 
    } 

Answer 1

-webkitまたは-mozで行うことは、IEでは動作しません。ブラウザエンジン固有のCSSスタイルです。 ms-transformはIE9で動作するはずですが、移行スタイルはありません。詳細については、MSDNのCSS Compatibility and Internet Explorerに関する記事を参照してください。