0

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

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);
}
4

1 回答 1

0

只需尝试这样的事情

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;
}​
于 2013-10-14T04:34:26.847 回答