在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（）填充库

回答

相关问题