Question

我在这里完全失败了，我的网站标头旁边有两个列表，显示当前用户登录的信息和统计信息。

 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需要这个......

Answer 2

不确定但请尝试此更新

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

调整所需的宽度。

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

它应该有用......

列出的项目不会出现在IE 9中

2 个答案: