Как исправить ошибку пробела в IE 8 для YUI 3.4.1 Tabview? - PullRequest
Новая
       12

Как исправить ошибку пробела в IE 8 для YUI 3.4.1 Tabview?

0 голосов
/ 12 октября 2011

Я не уверен, что я делаю здесь не так.У меня есть некоторая базовая разметка.Я использую файлы 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>

1 Ответ

0 голосов
/ 01 ноября 2011

Я обнаружил, что IE 8 имеет проблемы с пробелами.Прочитайте это здесь: http://jhop.me/ie8-bugs

...