我被要求创建一个带有标题和侧边栏的页面，其中侧边栏是页面高度减去标题高度的 100%，没有垂直滚动条。以下内容适用于 FF、Chrome 和 IE9+，但 polyfill 在 IE8 中不起作用。
我在 IE8 中尝试了以下 2 个 polyfill 计算库，但都不起作用。我是否做错了什么，或者库在给定的场景中不起作用？我尝试按照示例使用 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>
最佳答案
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>
关于javascript - 各种 calc() polyfill 库在 IE8 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24564873/