列出的项目不会显示在 IE 9 中答案

【问题标题】：Listed items will not show up in IE 9列出的项目不会显示在 IE 9 中
【发布时间】：2011-09-02 11:05:07
【问题描述】：

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

 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 有问题，尽管我可能大错特错。任何建议将不胜感激，谢谢！

【问题讨论】：

标签： html css internet-explorer-9

【解决方案1】：

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

【讨论】：

是的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

【解决方案2】：

不确定，但试试这个更新

.navbar {   float:right; padding:0px 10px; margin: 0px 20px 0 0; background:blue;  
            width:60%; overflow:hidden;}
          /**/
        }

调整所需的宽度。

尽量避免使用高度，它可能会剪切扩展数据 + 避免使用边距，这会使浏览器兼容性恶化，即使是非常规浏览器也是如此

它应该可以工作......

【讨论】：