1

次のhtml/cssは、最新バージョンのchromeとfirefoxでは正しいように見えますが、IE9では違いに気付くでしょう。

#links#menu-barリンクdivを含むすべての要素が100％であることを再確認したにもかかわらず、は拡張して高さ全体を占めることはありません。

背景色は紫色で、ul要素を調べると、ulが完全な高さを占めていることがわかります#linksが#links、何らかの理由でメニューバーの高さを満たしていません。

なぜこれが起こっているのか、それを修正する方法はありますか？絶対的なポジショニングを伴わない限り、回避策も問題ありません。

注：CSSの最初の大きなチャンクはリセットです。2番目（で始まる#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 ハックを使用して、要素のサイズを親コンテナーの幅に変更しました。私が添付したウィンドウのサイズ変更イベントで：

$('#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 に答える