1

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

#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>
4

2 回答 2

2

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

$('#links li').css('height', $('#menu-bar').height());
于 2013-09-12T05:53:40.167 回答
0

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

#link{
   overflow: hidden;
 }

或者

#link{
   overflow:scroll;
  }
于 2013-04-16T23:44:39.027 回答