Question

我不确定我在这里做错了什么。我有一些基本的标记。我使用的reset，fonts，grids和base文件用于Yahoo User Interface (YUI 3.4.1)。当我向较大的部分添加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>

Answer 1

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

如何修复YUI 3.4.1 Tabview的IE 8空白错误？

1 个答案: