爲什麼這個菜單的CSS不適用於Internet Explorer 8，但可以與Chrome，Firefox等一起使用？

請在我的網站上查看我的菜單代碼。您可以在此網站上查看源和css文件：http://a4um.com/menu.php 爲什麼這個菜單的CSS不適用於Internet Explorer 8，但可以與Chrome，Firefox等一起使用？

2013-07-04 user2400240

那麼會出現很多這樣的問題，更好的是你應該切換到一些JavaScript API如jQuery。因爲有很多瀏覽器依賴點，我們必須注意。 – codeomnitrix

只需右鍵單擊屏幕，然後單擊查看頁面源。 – user2400240

您需要做的第一件事是擺脫您的非唯一ID。在我的公司，我們對頂級li元素使用class =「parent」，對於第二級ul元素使用class =「children」，對於第二級li元素使用class =「child」。您可能想要分配ID的唯一元素是頂層ul。 –

一些元素是不支持IE，所以你可以包括即

JS參考https://github.com/aFarkas/html5shiv

試試這個

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="menu.css"><!-- your css without change --> 

<!-- add this for ie support--> 


    <!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 



</head> 
<body> 
    <div id="big_wrapper"> 
     <header id="top_header"> 
      <nav> 
       <ul> 
        </li> 
        <li id="moreButton"><a href="#" class="hide">Menu </a> 
         <ul> 
          <li id="second"><a href="#">Logout</a></li> 
          <br> 
          <li id="second"><a href="#">Mail</a></li> 
         </ul> 
        </li> 
       </ul> 
      </nav> 
     </header> 
    </div> 
</body>

來源

2013-07-04 04:45:27

這實際上適用於我。網頁底部現在說網頁上有錯誤，但只要正確顯示網站，我就滿意了。 – user2400240

你已經使用了html 5標籤ie;導航，標題這是無效的即低版本，所以按照下面的代碼它可以幫助你。

<div id="big_wrapper"> 
      <div id="top_header"> 
    <div class="nav"> 
       <ul> 
        </li> 
        <li id="moreButton"><a href ="#" class = "hide"> 
         Menu 
        </a> 
        <ul> 
         <li id = "second"><a href="#">Logout</a></li> 
         <br> 

            <li id = "second"><a href="#">Mail</a></li> 
        </ul> 
        </li> 
       </ul> 
      </div> 
    </div> 
    </div> 


*{ 
    margin: 0px; 
    padding:0px; 
} 

.hide{ 
    color: white; 
    text-decoration:none; 
} 
.hide:link{ 
    color: white; 
    text-decoration:none; 
} 
.hide:visited{ 
    color: white; 
    text-decoration:none; 
} 
.hide:hover{ 
    color: white; 
    text-decoration:none; 
} 
.hide:active{ 
    font: bold 23px Tahoma; 
    color: white; 
    text-decoration:none; 
} 


header,section,footer,aside,nav,article,hgroup{ 
    display:block; 
} 
body{ 
    width:100%; 
    height:110%; 
    display:-webkit-box; 
    -webkit-box-pack: center; 
    overflow-y: scroll; 
    overflow-x: scroll; 
    overflow: -moz-scrollbars-vertical; 
} 
#big_wrapper{ 
    position:absolute; 
    top: 0; right: 0; bottom:0; left:0; 

    background:#F0F0F0; 

    display:-webkit-box; 
    -webkit-box-orient:vertical; 
    -webkit-box-flex: 1 
} 
#top_header{ 
    background: #252525; 
    display:inline-block; 
    border: 1px solid grey; 
    border-left:1px solid black; 
    -webkit-box-orient:horizontal; 
    -webkit-box-flex:1; 
    color: white; 
    position:absolute; 
    right:0;left:0; 
} 
#logoThing{ 
    width:100px; 
    font: bold 25px Tahoma; 
    padding-left:300px; 
    padding-right:20px; 
} 
#otherTopStuff{ 
    width:120px; 
    font: bold 25px Tahoma; 
    border-left: 1px solid grey; 
    padding-left:20px; 
    padding-right:20px; 
} 
#moreButton{ 
    width:30px; 
    font: bold 25px Tahoma; 
    border-left: 1px solid grey; 
    padding-left:5px; 
} 
#userID{ 
    width:120px; 
    font: bold 25px Tahoma; 
    padding-right:20px; 
} 
#top_header li{ 
    display:inline-block; 
    list-style:none; 
} 
#loginStuff{ 
    font: bold 12px Tahoma; 
    padding:0px; 
    margin:0px; 
} 


#new_div{ 
    display:-webkit-box; 
    -webkit-box-orient:horizontal; 
} 

#new_div2{ 
    display:-webkit-box; 
    -webkit-box-orient:horizontal; 
    border-top:80px solid #F0F0F0; 


} 

#otherForms{ 
    background:white; 
    width: 300px; 
    border-top: 5px solid white; 
    text-align:left; 

} 
#whiteSpace{ 
    background:white; 
    border-top:1px solid white; 
    border-radius:10px; 
    bottom:0; 
    width:900px; 
    padding:20px; 
    -webkit-box-flex:1; 


} 
#signupTitle{ 
    font: bold 18px Tahoma; 
} 
#theForms{ 

    padding-top:20px; 

} 
#textBox{ 
    float:right; 
} 
#submitButton{ 

    float:center; 

} 
#aligning{ 
    text-align:center; 
} 

#the_footer{ 
    text-align:center; 
    padding:20px; 
    border-top:2px solid black; 
} 

.nav ul ul { 
    display: none; 
} 

    .nav ul li:hover ul { 
     display: block; 
    } 
    .nav ul:after { 
     content: ""; clear: both; display: block; 
    } 
.nav ul li { 
    float: left; 
} 
     .nav ul li:hover a { 
      color: #fff; 
     } 

.nav ul ul { 
    background: #5f6975; border-radius: 0px; padding: 0; 
    position: absolute; top: 100%; 
} 
    .nav ul ul li { 
     position: relative; 
    } 
     .nav ul ul li a { 
      padding: 0px 10px; 
      color: #fff; 
     } 
      .nav ul ul li a:hover { 
       background: #4b545f; 
      }

來源

2013-07-04 04:59:05

爲什麼這個菜單的CSS不適用於Internet Explorer 8，但可以與Chrome，Firefox等一起使用？

回答

相關問題