PhotoGallery不會在IE中滾動

PhotoBanner不會在IE中滾動，但它會在Chrome和Firefox中滾動。PhotoGallery不會在IE中滾動

我搜索了Google，無法弄清楚什麼是錯的。

這裏是一個網頁的鏈接：

http://www.uncg.edu/~cwdicken/IndProject/Index.html

* {margin: 0; padding: 0;} 

body { 
    background: url('bg.jpg'); 
} 

#container { 
    width: 1000px; 
    height: 500px; 
    overflow: hidden; 
    margin: 50px auto; 
    background: url('divback.jpg'); 
    background-size:1000px 500px; 
    position:relative; 
} 

#header{ 
    width: 800px; 
    margin: 50px auto; 
} 

#header h1 { 
    text-align: center; 
    font: 100 60px/1.5 Verdana, Geneva, sans-serif; 

} 

#header p { 
    font: 100 15px/1.5 Verdana, Geneva, sans-serif; 
    text-align: justify; 
} 


.photobanner { 
    height: 500px; 
    width: 3550px; 
    top:15%; 
    position:relative; 


} 

/*keyframe animations*/ 
.first { 
    -webkit-animation: bannermove 30s linear infinite; 
     -moz-animation: bannermove 30s linear infinite; 
     -ms-animation: bannermove 30s linear infinite; 
     -o-animation: bannermove 30s linear infinite; 
      animation: bannermove 30s linear infinite; 
} 



@-moz-keyframes bannermove { 
0% { 
    margin-left: 0px; 
} 
100% { 
    margin-left: -2125px; 
} 

} 

@-webkit-keyframes bannermove { 
0% { 
    margin-left: 0px; 
} 
100% { 
    margin-left: -2125px; 
} 

} 

@-ms-keyframes bannermove { 
0% { 
    margin-left: 0px; 
} 
100% { 
    margin-left: -2125px; 
} 

} 

@-o-keyframes bannermove { 
0% { 
    margin-left: 0px; 
} 
100% { 
    margin-left: -2125px; 
} 

} 
@keyframes bannermove { 
0% { 
    margin-left: 0px; 
} 
100% { 
    margin-left: -2125px; 
} 

} 

.photobanner { 
    height: 233px; 
    width: 3550px; 
    margin-bottom: 50px; 
} 

.photobanner img { 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 

.photobanner img:hover { 
    -webkit-transform: rotate(360deg) scale(1.5); 
    -moz-transform: rotate(360deg) scale(1.5); 
    -o-transform: rotate(360deg) scale(1.5); 
    -ms-transform: rotate(360deg) scale(1.5); 
    transform: rotate(360deg) scale(1.5); 
    cursor: pointer; 

    -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2); 
    -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2); 
    box-shadow: 0px 3px 5px rgba(0,0,0,0.2); 
}

來源

2015-04-12 Chuck Dickens

包括photobanner CSS和JS/jQuery代碼，你可能在你的問題，以便我們可以得到一個更好的主意。最好的猜測是，IE需要一些特定的代碼才能讓事情發生變化 – Tasos

這裏是一個小提琴工作：http://jsfiddle.net/3hurmyL1/3/

.photobanner { 
    height: 500px; 
    width: 3550px; 
    margin-left: 0; 
} 
@-webkit-keyframes bannermove { 
0% { margin-left: 0; } 
100% { margin-left: -2125px; } 
} 
@keyframes bannermove { 
0% { margin-left: 0; } 
100% { margin-left: -2125px; } 
} 
/*keyframe animations*/ 
.first { 
    -webkit-animation: bannermove 30s linear infinite; 
    animation: bannermove 30s linear infinite; 
}

您不必添加所有瀏覽器屬性了;
你加引號「」當你叫你的名字關鍵幀，你不應該:)

希望它幫助:)

來源

2015-04-12 17:27:14

你的小提琴在Chrome中不適合我。我刪除了「bannermove」中的引號，但它在IE中仍然不起作用。旋轉工作，但不是滾動。 –

好吧，我的壞，我沒有檢查每個瀏覽器： http://jsfiddle.net/3hurmyL1/3/這對我在每一個瀏覽器（IE11）我編輯我的答案:) –

好吧，現在你可以讓當某人懸停在圖像上時它會旋轉360度。在Chrome和Firefox中，CSS的行爲與我想要的完全相同，但它不在IE中。我想讓畫廊滾動，當有人在圖像上懸停時，它會縮放並旋轉360度。 –

PhotoGallery不會在IE中滾動

回答

相關問題