IE 9 Div高度100％不工作

下面的html/css在Chrome和Firefox的最新版本中看起來是正確的，但在IE 9中您會注意到不同之處。IE 9 Div高度100％不工作

#links#links沒有擴大佔據整個高度的#menu-bar即使我已經仔細檢查包含鏈接div的所有元素都在100％。

的ul背景顏色是紫色的，當你檢查的元素，你可以看到ul因某種原因不能填寫菜單欄高度佔用的#links但#links全高度。

任何想法，爲什麼發生這種情況或如何解決它？只要不涉及絕對定位，解決方法也可以。

注意：第一大塊CSS是重置。第二個（從#menu-bar）是酒吧的樣式。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html lang="en"> 
    <head> 
     <title>Visitor Form</title> 

     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

      <style type="text/css"> 
      html, body, div, span, applet, object, iframe, 
      h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
      a, abbr, acronym, address, big, cite, code, 
      del, dfn, em, img, ins, kbd, q, s, samp, 
      small, strike, strong, sub, sup, tt, var, 
      b, u, i, center, 
      dl, dt, dd, ol, ul, li, 
      fieldset, form, label, legend, 
      table, caption, tbody, tfoot, thead, tr, th, td, 
      article, aside, canvas, details, embed, 
      figure, figcaption, footer, header, hgroup, 
      menu, nav, output, ruby, section, summary, 
      time, mark, audio, video { 
       margin: 0; 
       padding: 0; 
       border: 0; 
       font-size: 12pt; 
       /*font: inherit;*/ 
       vertical-align: baseline; 
      } 
      /* HTML5 display-role reset for older browsers */ 
      article, aside, details, figcaption, figure, 
      footer, header, hgroup, menu, nav, section { 
       display: block; 
      } 
      html, body { 
       line-height: 1; 
       position: absolute; 
       height: 100%; 
       width: 100%; 
      } 
      ol, ul { 
       list-style: none; 
      } 
      blockquote, q { 
       quotes: none; 
      } 
      blockquote:before, blockquote:after, 
      q:before, q:after { 
       content: ''; 
       content: none; 
      } 
      table { 
       border-collapse: collapse; 
       border-spacing: 0; 
      } 


      #menu-bar { 
       width: 100%; 
       background-color: black; 
       height: 4%; 
       color: white; 
       display: table; 
       box-sizing:border-box; 
       -moz-box-sizing:border-box; /* Firefox */ 
       -webkit-box-sizing:border-box; /* Safari */ 
      } 

      #menu-title { 
       display: table-cell; 
       vertical-align: middle; 
       height: 100%; 
       padding: 0px 10px; 
      } 

      #links { 
       width: 100%; 
       height:100%; 
       display: table; 
       text-align:center; 
      } 

      #menu-bar ul { 
       display: table-cell; 
       vertical-align: middle; 
       margin: 0 auto; 
       height: 100%; 
      } 

      #menu-bar li { 
       background-color: #522D80; 
       display: inline-block; 
       margin-right: 1em; 
       height: 100%; 
       padding: 0px 10px; 
      } 

      #menu-bar a { 
       position: relative; 
       top: 25%; 
       color: white; 
      } 

      #menu-bar li.selected { 
       background-color: #F66733; 
      } 

      #content { 
       height: 96%; 
       width: 100%; 
       box-sizing:border-box; 
       -moz-box-sizing:border-box; /* Firefox */ 
       -webkit-box-sizing:border-box; /* Safari */ 
      } 
     </style> 
    </head> 
    <body> 

     <div id="menu-bar"> 
      <span id="menu-title">Facilities</span> 

      <div id="links"> 
       <ul> 
        <li><a href="pages/visitors/visitor_form.php">Visitors</a></li> 
        <li><a href="pages/licensing/license_form.php">Licensing</a></li> 
        <li><a href="pages/equipment/equipment_form.php">Equipment</a></li> 
        <li><a href="pages/rooms/room_form.php">Rooms</a></li> 
        <li><a href="pages/office_maps/office_maps.php">Office Maps</a></li> 
       </ul> 
      </div> 
     </div> 
    </body> 
</html>

來源

2013-03-14 Daniel

我最終使用一個JavaScript劈以調整元件，以他們的父容器的寬度。在我附加的窗口大小調整事件上：

$('#links li').css('height', $('#menu-bar').height());

來源

2013-09-12 05:53:40 Daniel

將＃鏈接的溢出設置爲隱藏或滾動。

#link{ 
    overflow: hidden; 
}

或

#link{ 
    overflow:scroll; 
    }

來源

2013-04-16 23:44:39

這些都不會影響IE 9中的頁面。您指的是「#links」，我認爲我沒有元素「#link」？ – Daniel 2013-04-22 19:17:16

是的，我的意思是＃鏈接，對此感到抱歉。 – 2013-04-22 19:32:59

IE 9 Div高度100％不工作

回答

相關問題