在IE8中不能使用的各種calc（）填充庫

我被要求創建一個帶有頁眉和側欄的頁面，其中側欄是頁面高度的100％減去標題高度，沒有垂直滾動條。以下工作在FF，Chrome和IE9 +中，但polyfill在IE8中不做任何事情。在IE8中不能使用的各種calc（）填充庫

我試過以下2個在IE8中的polyfill calc庫，但都沒有工作。我做錯了什麼，或者在特定情況下圖書館不工作？我已經嘗試按照示例使用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>

來源

2014-07-03 user1491819

這並沒有真正回答您的具體問題，但您可以使用絕對定位來實現這種佈局，幾乎支持通用瀏覽器。 – Shmiddty

要開始回答您的實際問題，您的頁面加載完成後是否存在任何腳本或資源錯誤？ – Shmiddty

的CSSParser庫是必需的CJKay Polycalc工作。這適用於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>

來源

2014-09-03 00:12:15 user1491819

在IE8中不能使用的各種calc（）填充庫

回答

相關問題