IE 9 Div Высота 100% Не работает

Следующие html/css выглядят корректно в последних версиях chrome и firefox, но в IE 9 вы заметите разницу.IE 9 Div Высота 100% Не работает

#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

Я в конечном итоге с помощью яваскрипта взломать, чтобы изменить размер элементов по ширине их родительского контейнера. В окне изменения размера событий я прикрепил:

$('#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

Да, я имел в виду #links, извините за это. –

IE 9 Div Высота 100% Не работает

ответ

Смежные вопросы