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中工作，但没有过渡风格。有关详细信息，请参阅CSS Compatibility and Internet Explorer上的此MSDN文章。

CSS3浏览器兼容性

1 个答案: