Question

我试图寻找这个答案，我希望在寻找它时我没有错过一个明显的答案。我有一个网站www.silenticonstudio.com，在我转发地址之前，并使用其主机网站，转换工作在Chrome中。一旦转发，它就会停止工作。它适用于Firefox，IE，但不适用于android浏览器。它适用于手机上的chrome，但不适用于IE mobile。有人有什么答案吗？我错过了什么？我将非常感激。

CSS：

{
/*gallery*/
img.floatLeft { 
    float: left; 
    margin: 20px; 
    border:groove;
    padding-right:15 px;}


.imagebox { float: left; width: 180px; margin-right: 20px; }

#gallery {width:740px; height:400px; position:relative; z-index:100; padding-right:10px;margin-bottom:150px}
#gallery ul {list-style:none; padding:0; margin:0; width:180px; float:right;}
#gallery ul li {display:inline; width:60px; height:60px; float:left;}

#gallery ul li a {display:block; width:50px; height:50px; text-decoration:none; padding:4px; border:1px solid #fff;}
#gallery ul li a img {width:50px; height:50px; border:0;
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-icab-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
}

#gallery ul li a b {position:absolute; visibility:hidden; left:0; top:5px; display:block; width:560px; height:350px; ;
filter: alpha(opacity=0); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); opacity:0;
-webkit-transition: 0.6s ease-in-out;
-moz-transition: 0.6s ease-in-out;
-o-transition: 0.6s ease-in-out;
-ms-transition: 0.6s ease-in-out;
-khtml: 0.6s ease-in-out;
transition: 0.6s ease-in-out;
}

#gallery ul li a b img {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
-khtml: scale(0);
transform: scale(0);
-webkit-transition: 0.6s ease-in-out;
-moz-transition: 0.6s ease-in-out;
-o-transition: 0.6s ease-in-out;
-ms-transition: 0.6s ease-in-out;
-khtml: 0.6s ease-in-out;
transition: 0.6s ease-in-out;
}

#gallery ul li a:hover {white-space:normal; outline:0;}

#gallery ul li a:hover b {filter: alpha(opacity=100); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); opacity:1; visibility:visible;}
#gallery ul li a:hover b img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
-khtml: scale(1);
transform: scale(1);
}

#gallery ul li a b i {display:block; width:570px; height:360px; text-align:center; display:table-cell; vertical-align:middle;}
#gallery ul li a b i img {width:auto; height:auto;/* border:1px solid #000; padding-left:50px;*/
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-icab-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-khtml-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
}

Answer 1

只需尝试这样的事情

HTML

<ul>
    <li>blah</li>
    <li>blah2</li>
</ul>
CSS

ul li:nth-child(1){
    background-color: #ff0000;
}

ul li:nth-child(2){
    background-color: #00ff00;
}

li {
    display: inline-block;
    height: 20px;
    width: 100px;
    text-align: center;
     transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
}

li:hover {
     width: 300px;
}

CSS过渡问题

1 个答案: