2016-02-09 232 views
0

做了一個導航欄,可以在懸停時更改照片。它適用於我的Firefox,但在我的工作中,所有計算機仍然使用IE 8,而且酒吧根本不會顯示。Internet Explorer 8 css兼容性

會使它與js會使它更好? 我知道如何只使用CSS和JS

nav{ 
 
    background-color: #fff; 
 
    width:150px; 
 
    height: 667px; 
 
    float:right; 
 
} 
 

 
nav h1{ 
 
    padding: 20px; 
 
    color: #777; 
 
    font: 20px tahoma,times,serif; 
 

 
} 
 
ul { 
 
position: relative; 
 
margin: 0; 
 
padding: 0; 
 
list-style: none; 
 
width: 150px; 
 
text-align: right; 
 
} 
 
ul li { 
 
position: relative; 
 
} 
 
li ul { 
 
position: absolute; 
 
right: 149px; 
 
top: 0; 
 
display: none; 
 
} 
 
ul li a { 
 
display: block; 
 
text-decoration: none; 
 
color: #777; 
 
background: #fff; 
 
padding: 5px; 
 

 
border-bottom: 0; 
 
} 
 
ul { 
 
margin: 0; 
 
padding: 0; 
 
list-style: none; 
 
width: 150px; 
 

 
} 
 
li:hover ul { 
 
    display: block; 
 
} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background: #333; 
 
    background: url("http://vignette1.wikia.nocookie.net/logopedia/images/6/69/FC-Barcelona-old-logo.png/revision/latest?cb=20120211172615"); 
 
    background-repeat: no-repeat; 
 
} 
 

 
.container{ 
 
    overflow: hidden; 
 
    margin-right: 0; 
 
    height: 500px; 
 
    -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.3); 
 
    box-shadow: 10px 10px 10px rgba(0,0,0,0.3); 
 
    width: 800px; 
 
} 
 
.container img{ 
 
    margin-top: 0px auto; 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    z-index: -60; 
 
    height: 500px; 
 
    width: 800px; 
 
} 
 
.container li img { 
 
    opacity: 0.5; 
 
    margin-top: 0px auto; 
 
    position: absolute; 
 
    left: 0px; 
 
    z-index: -50; 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 

 
li:nth-child(1){ 
 
    padding-top: 0px; 
 
} 
 

 
li a:hover { 
 
    background: #eee; 
 
} 
 

 
li:hover a +img { 
 
    opacity: 1; 
 
    position: fixed; 
 
    margin-top: 0px auto; 
 
    left: 0px auto; 
 
    height: 500px; 
 
    width: 800px; 
 
}
<!DOCTYPE html> 
 

 
<html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8" /> 
 
     <LINK rel=stylesheet type="text/css" href="StyleSheet.css"/> 
 
     <title></title> 
 
    </head> 
 
    <body> 
 
     <div class="container"> 
 
     <nav><h1><b>ברצלונה</b></h1> 
 
    <ul> 
 
    <li><a href="#">ברצלונה</a><img src="http://media3.fcbarcelona.com/media/asset_publics/resources/000/160/456/size_640x360/pic_2015-01-11_BARCELONA-ATLETICO_45.v1431011244.JPG" alt="1"></li> 
 
    <li><a href="#">לה ליגה</a><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTd6ngNNGapdLhqdS4KbuoNNCaaUMP4Svu-e_9rXMh_wLDtPpSE" alt="1"> 
 
     <ul> 
 
     <li><a href="#">ברצלונה</a></li> 
 
     <li><a href="#">ריאל</a></li> 
 
     <li><a href="#">אתלטיקו</a></li> 
 
     </ul> 
 
     
 
    </li> 
 
    <li><a href="#">בונדסליגה</a><img src="http://static3.demotix.com/sites/default/files/imagecache/a_scale_large/2000-5/photos/1368393557-club-atletico-de-madrid-v-fc-barcelona--la-liga_2046465.jpg" alt="1"> 
 
     <ul> 
 
     <li><a href="#">באיירן</a></li> 
 
     <li><a href="#">וולפסבורג</a></li> 
 
     <li><a href="#">הנדובר</a></li> 
 
     <li><a href="#">דורטמונד</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">סיירה א</a><img src="http://barcelonacamps.com/wp-content/uploads/2014/04/barca-new-team.jpg" alt="1"> 
 
     <ul> 
 
     <li><a href="#">אינטר</a></li> 
 
     <li><a href="#">מילאן</a></li> 
 
     <li><a href="#">יובה</a></li> 
 
     <li><a href="#">רומא</a></li> 
 
     </ul> 
 
     </ul> 
 
    </li> 
 
      </nav> 
 
     </div> 
 
    </body> 
 
</html>

+0

在某些情況下,我發現它在某些瀏覽器中無法正常工作,但在css中指定了兩次相同的事情時(我無法記起哪個瀏覽器)。例如,我看到你正在定義ul兩次。嘗試只定義ul一次,並將所有規則放在那裏。即使這不能解決問題,也更容易閱讀和維護:-) – bestprogrammerintheworld

回答