Internet Explorer 8 CSS兼容性

Question

制作了一个导航栏，可在悬停时更改照片。 它在我的Firefox上运行良好，但是在我的工作中，所有计算机仍然使用IE 8，并且栏完全不显示。

用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>

Answer 1

这与css或js无关，而与html有关，您在html4浏览器上使用的是html 5元素。 考虑使用polyfill js： https : //github.com/afarkas/html5shiv或仅使用html4元素。

Internet Explorer 8 CSS兼容性

问题描述

1 个解决方案

解决方案1
0 2016-02-09 18:56:34

Internet Explorer 8 CSS兼容性

问题描述

1 个解决方案

解决方案1 0 2016-02-09 18:56:34

解决方案1
0 2016-02-09 18:56:34