Блог

Главная - Вопросы по программированию - Как исправить ошибку IE 8 с пробелами для YUI 3.4.1 Tabview?

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

#css #internet-explorer-8 #yui #yahoo-api

#css #internet-explorer-8 #yui #yahoo-api

Вопрос:

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

Комментарии:

1. Неужели никто не может помочь воспроизвести эту проблему?

Ответ №1:

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