Блог

Главная - Вопросы по программированию - Различные библиотеки полизаполнения calc () не работают в IE8

Различные библиотеки полизаполнения calc () не работают в IE8

#javascript #css #internet-explorer-8 #polyfills

#javascript #css #internet-explorer-8 #полизаполнения

Вопрос:

Меня попросили создать страницу с заголовком и боковой панелью, где боковая панель на 100% равна высоте страницы минус высота заголовка, без вертикальной полосы прокрутки. Следующее работает в FF, Chrome и IE9 , но полизаполнение ничего не делает в IE8.

Я пробовал следующие 2 библиотеки полизаполнения calc в IE8, и ни одна из них не работает. Я делаю что-то неправильно, или библиотеки не работают в данном сценарии? Я пытался загрузить скрипт с помощью Modernizr в соответствии с примером, а также загрузить скрипт непосредственно в конце страницы без эффекта.

Пример кода:

 <!DOCTYPE html>
<html>
    <head>
        <title>title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
        <script type="text/javascript" src="modernizr.custom.js"></script>
        <style>
            body,html{
                height: 100%;
                color: white;
                margin:0;
                padding: 0;
            }
            .heading{
                background:red;
                height: 100px;
            }
            .box{
                background: blue;
                width:200px;
                height: 100%;
                height: calc(100% - 100px);
            }

        </style>

    </head>
    <body>
        <div class="heading">Heading</div>
        <div class="box">Sidebar</div>

        <!--MUST be placed after styles have loaded-->
        <!--<script type="text/javascript" src="./calc.min.js"></script>-->
        <!--<script type="text/javascript" src="./polycalc.js"></script>-->
        <script>
            jQuery(document).ready(function() {
            });
                    Modernizr.load({
                    test: Modernizr.csscalc,
//                    nope: 'calc.js'
                    nope: 'polycalc.js'
                });
        </script>
    </body>
</html>

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

1. На самом деле это не отвечает на ваш конкретный вопрос, но вы можете использовать абсолютное позиционирование для достижения такого макета с почти универсальной поддержкой браузера.

2. Чтобы начать отвечать на ваш актуальный вопрос, возникают ли какие-либо ошибки скрипта или ресурса при загрузке вашей страницы?

Ответ №1:

Для работы CJKay Polycalc требуется библиотека CSSParser. Это работает в IE7 .

 <!--CSSParser required for CJKay Polycalc
    https://github.com/Schepp/CSS-Filters-Polyfill
    copy following files to: js/css_parser
    - contentloaded.js
    - css-filters-polyfill-parser.js
    - css-filters-polyfill.js
    - cssParser.js
-->
<script>
    var polyfilter_scriptpath = "js/css_parser/";
</script>
<script type="text/javascript" src="js/css_parser/cssParser.js"></script>

<!--
    CJKay Polycalc
    https://codeload.github.com/CJKay/PolyCalc/zip/master
-->
<script type="text/javascript" src="js/polyfill/cjkay-polycalc.js"></script>