0

ここで何が間違っているのかわかりません。基本的なマークアップがあります。reset、、、およびファイルをfontsに使用しています。大きなセクションにa を追加すると、その下に のスペースができます。 正常に動作します。なぜこれを行っているのかわからないので、誰か確認してもらえますか？外側のdivを削除すると問題ありません。gridsbaseYahoo User Interface (YUI 3.4.1)TabViewIE 8FireFox

私の外部CSSファイル：

body{margin:auto;width:1025px;}
#nav{width:280px;}
#main{width:745px;}
#hd #hd-container{border-bottom:solid 2px #2647a0;margin-bottom:1em;}
#ft #ft-container{border-top:solid 2px #2647a0;text-align:center;}
#ft #ft-container #copyright{margin-bottom:0;}
#hd-container,#ft-container{padding:10px;}
#main-container{}
.main-content{}

以下は部分的なマークアップです。

<body class="yui3-skin-sam">

    <div id="hd" style="background-color:Aqua;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.
        </div>

        <div id="bd">

            <div class="yui3-g">

                <div class="yui3-u" id="nav" style="background-color:Yellow;">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.
                </div>
                <div class="yui3-u" id="main">

                    <div id="main-container"> <-- This div is giving the issue -->
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.
                        <div id="demo">
                            <ul>
                                <li><a href="#foo">foo</a></li>
                                <li><a href="#bar">bar</a></li>
                                <li><a href="#baz">baz</a></li>
                            </ul>
                            <div>
                                <div id="foo">foo content</div>
                                <div id="bar">bar content</div>
                                <div id="baz">baz content</div>
                            </div>
                        </div>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.
                    </div>

                </div>

            </div>

        </div>

        <div id="ft" style="background-color:Aqua;">
            <div id="ft-container">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.
            </div>
        </div>

        <script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>

        <script type="text/javascript">
            YUI().use('tabview', function (Y) {
                var tabview = new Y.TabView({
                    srcNode: '#demo'
                });

                tabview.render();
            });
        </script>

 </body>
4

1 に答える 1

0

IE8には空白の問題があることがわかりました。ここでそれを読んでください：http：//jhop.me/ie8-bugs

于 2011-11-01T12:04:18.907 に答える