CSS3瀏覽器兼容性

-2

對此page的CSS3過渡效果在IE以外的其他任何瀏覽器上都能很好地工作。它還在縮略圖的頂部和左側添加了邊框。我試圖讓所有元素的邊界爲0，但它仍然沒有幫助。 CSS如下所示。CSS3瀏覽器兼容性

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

來源

2012-04-10 Dz.slick

你的問題是什麼？ – j08691 2012-04-10 15:27:09

如何在IE上查看邊界時消失？如何使IE瀏覽器的動畫效果與其他瀏覽器一樣？ – 2012-04-10 15:31:10

它應該在IE中工作嗎？我們在這裏討論哪個版本？當評論表明信息不足並要求澄清時，您應該相應地編輯您的問題，而不是發佈其他評論。 – Sparky 2012-04-10 15:31:12

你使用-webkit或-moz做的任何事情都不能在IE中使用，它們是瀏覽器引擎特有的CSS樣式。 ms轉換應該在IE9中工作，但沒有轉換風格。有關更多詳細信息，請參閱有關CSS Compatibility and Internet Explorer的MSDN文章。

來源

2012-04-10 15:33:29

我認爲有助於回答我的問題。非常感謝。 – 2012-04-10 15:36:16

CSS3瀏覽器兼容性

回答

相關問題