Question

以下html / css在最新版本的chrome和firefox中看起来是正确的，但在IE 9中你会注意到有所不同。

#links没有扩展到占据#menu-bar的整个高度，即使我已经仔细检查了包含链接div的所有元素都是100％。

ul背景颜色为紫色，当您检查元素时，您可以看到ul占据了#links的完整高度但#links由于某种原因而没有' t填充菜单栏高度。

为什么会发生这种情况或如何解决这个问题？只要它不涉及绝对定位，解决方案也会没问题。

注意：第一大块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>

Answer 1

我最终使用javascript hack将元素大小调整为其父容器的宽度。在我附加的窗口调整大小事件：

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

Answer 2

将#link的溢出设置为隐藏或滚动。

#link{
   overflow: hidden;
 }

或

#link{
   overflow:scroll;
  }

IE 9 Div高度100％不工作

2 个答案: