html - 列出的元素将不会显示在 IE 9 中

Question

我在这里完全不知所措，我有两个列表漂浮在我网站的 header 中，旁边是显示当前登录用户的信息和统计信息的 Logo 。

 Masthead ______________________________________________________
|             Navbar_________________________________________   |
|  logo      |                                               |  |
|            |linklist leftside         linklist rightside   |  |                                      
|            |                                               |  |
|            |_______________________________________________|  |
|                                                               |
|_______________________________________________________________|

我的 Html 和 CSS 是直截了当的，但是由于某些原因，这些列表不会在 IE9 中显示。它们在 Firefox 和 Chrome 中完美显示。我一直在努力让他们出现。我可以看到列表中一些单词的最顶部，但之后它们就被切断了。我不确定它是否与溢出问题有关，或者我的 if 语句是否有问题，但如果它们在其他浏览器中显示正常，我看不出有什么问题。

HTML:

<div class="masthead">
   <div class="inner">
      <div id="site-description">
         <a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
          <h1>{SITENAME}</h1>
       </div>
       <div class="navbar">
          <div class="inner">
             <!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
             <form method="post" action="{S_LOGIN_ACTION}" class="headerspace">
                <fieldset class="quick-login">
                     <label for="username">{L_USERNAME}:</label>&nbsp;<input type="text"        
                      name="username" id="username" size="10" class="inputbox" title="
                      {L_USERNAME}" />
                    <br/>
                    <label for="password">{L_PASSWORD}:</label>&nbsp;&nbsp;<input type="password" 
                     name="password" id="password" size="10" class="inputbox" title="
                     {L_PASSWORD}"  />
                    <br/>
                    <!-- IF S_AUTOLOGIN_ENABLED -->
                    <label for="autologin">{L_LOG_ME_IN} <input type="checkbox" name="autologin" 
                     id="autologin" /></label>
                    <!-- ENDIF -->
                    <input type="submit" name="login" value="{L_LOGIN}" class="button2" />
                    {S_LOGIN_REDIRECT}
                </fieldset>
              </form>
              <!-- ENDIF -->
                <!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
                <ul class="linklist leftside">
                    <li class="logout">
                     <a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">
                      {L_LOGIN_LOGOUT}</a>
                    </li>
                    <li class="ucp">
                     <a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">{L_PROFILE}</a>
                    </li>
                    <li class="pm">
                     <!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}
                     </a>)<!-- ENDIF -->
                    </li>
                    <li class="posts">
                      <!-- IF S_DISPLAY_SEARCH -->
              <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
              <!-- ENDIF -->
                    </li>
                    <li class="permissions">
                     <!-- IF U_RESTORE_PERMISSIONS --> 
              <a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
              <!-- ENDIF -->
                    </li>
                </ul>
               <!-- ENDIF --> 

                <ul class="linklist rightside">
                    <li class="visit">
                      <!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ENDIF -->
                    </li>
                    <li class="time">
                       <!-- IF U_MCP -->{CURRENT_TIME} [&nbsp;<a href="{U_MCP}">{L_MCP}            
                        </a>&nbsp;]<!-- 
                        ELSEIF S_USER_LOGGED_IN -->{CURRENT_TIME}<!-- ENDIF-->
                    </li>
                    <li class="faq">
                       <a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a>
                    </li>
                      <!-- IF not S_IS_BOT -->
              <!-- IF S_DISPLAY_MEMBERLIST -->
                    <li class="members"><a href="{U_MEMBERLIST}" title="
                     {L_MEMBERLIST_EXPLAIN}">    
                     {L_MEMBERLIST}</a></li><!-- ENDIF -->
                     <!-- ENDIF -->
                </ul>
         </div>
      </div>
   </div>     
</div>

CSS:

#logo {
    float: left;
    width: auto;
    margin-top: -60px;
    margin-left: 20px;
}
.masthead {
    color: #FFFFFF;
    margin-bottom: 0px;
    margin-top: 25px;
    width: 96%;
    min-width: 650px;
    margin-right: auto;
    margin-left: auto;
    height: 130px;
    background-repeat: repeat-x;
    background-position: 0 0;
}
.navbar {
    padding-right: 10px;
    padding-left: 10px;
    margin-top: 0px;
    margin-bottom: auto;
    margin-left: 480px;
    margin-right: 20px;
    height: 86px;
}
.linklist.leftside {
    float:left;
    text-align: left;
    list-style-type: none;
    display: inline;

}
.linklist.rightside {
    float:right;
    text-align: right;
    list-style-type: none;
    margin-left: 20px;
    display: inline;
}

我更关注 CSS，我不认为问题出在我的 Html 上，尽管我可能完全错了。任何建议将不胜感激，谢谢!

Answer 1

您是否在页面顶部声明了您的文档类型？ IE 需要这个...