0

我不确定我在这里做错了什么。我有一些基本的标记。我正在使用reset、fonts、grids和base文件Yahoo User Interface (YUI 3.4.1)。当我将 a 添加TabView到较大的部分时，它下方有一个空间IE 8。 FireFox工作正常。不知道为什么会这样，有人可以检查吗？当我删除外部 div 时就很好了。

我的外部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

我发现 IE 8 存在空白问题。在这里阅读：http: //jhop.me/ie8-bugs

于 2011-11-01T12:04:18.907 回答