Javascript 在旧浏览器中显示flexbox

首先，我将解释到目前为止我所掌握的知识； 动态画布始终位于页面的中间，其宽度由javascript计算得出，因此可能会有所不同，在将一些flexbox div添加到其侧面之后，它们会均匀地填充页面的其余部分（即使按CTRL键调整大小，其工作方式也相同）：

* {
框大小：边框框；
}
身体{
高度：100vh；
保证金：0；
}
.包装纸{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
宽度：100%；
身高：100%；
}
.包装部{
-webkit-box-flex:1；
-ms-flex:1；
弹性：1；
边框：1px实心；
}
.包装袋{
边界：无；
}
#帆布{
垂直对齐：顶部；
}
var canvas=document.getElementById（“canvas”）；
变量宽度=500；//这可能是任何东西！它来自
//以前的计算，我没有包括在这里，因为它们是相关的
document.getElementsByClassName（'divB'）[0].style.flex='0'+WIDTH+'px'；
var width=document.getElementsByClassName（'divB'）[0].getBoundingClientRect（）.width；
var height=document.getElementsByClassName（'divB'）[0].getBoundingClientRect（）.height；
document.getElementById（“canvas”）.style.width=width+'px'；
document.getElementById（“canvas”）.style.height=height+'px'；
var ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“蓝色”；
ctx.fillRect（0，0，宽度，高度）；
//调整处理程序引用的大小：https://developer.mozilla.org/en-US/docs/Web/Events/resize
（功能（）{
addEventListener（“resize”，resizeThrottler，false）；
var-resizeTimeout；
函数resizeThrottler（）{
如果（！resizeTimeout）{
resizeTimeout=setTimeout（函数（）{
resizeTimeout=null；
actualResizeHandler（）；
}, 66);
}
}
函数actualResizeHandler（）{
var width=document.getElementsByClassName（'divB'）[0].getBoundingClientRect（）.width；
var height=document.getElementsByClassName（'divB'）[0].getBoundingClientRect（）.height；
document.getElementById（“canvas”）.style.width=width+'px'；
document.getElementById（“canvas”）.style.height=height+'px'；
ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“红色”；
ctx.fillRect（0，0，宽度，高度）；
}
}());

正如您在JSFIDLE上看到的，总的结果是画布和flexbox都填充了页面100%的宽度和高度

---

现在，在现代浏览器中你不会看到问题，但在旧浏览器中你会看到奇怪的事情发生；一个div浮动到下一个div，一些黑点等。对我来说，拥有旧浏览器支持非常重要，因为我使用cordova编译它，旧版本的Android用户仍然拥有旧浏览器，他们可能会认为我的应用非常奇怪。我已经在KitKat和一些更旧的版本上测试了它，我不知道为什么它们不能正确地支持flexbox。我添加了-webkit行，但仍然没有帮助。我甚至不介意使用另一种完全不同的解决方案，它不涉及flexbox

使用polyfill，您可能会节省大量的时间和挫折感-为了获得完全的浏览器支持，您需要全力以赴

最受欢迎的似乎是

---

如果你不想走polyfill之路，你可以遵循几年前的一些答案。

使用polyfill可能会为你节省大量的时间和挫折感-要获得完全的浏览器支持，你需要全力以赴

最受欢迎的似乎是

---

如果你不想走polyfill路线，你可以遵循几年前的一些答案。

我只是尝试了灵活性，但没有任何帮助。我认为问题仅仅在于我的画布与div的交互方式。。。另外，您提供的stackoverflow链接也没有帮助，因为我的情况更复杂。编辑：除了在GitHub上的自述文件中包含灵活性之外，我不确定我应该如何使用灵活性：“如果您只针对InternetExplorer10及更低版本，请在CSS中的任何display:flex声明之前添加-js display:flex声明”和“如果您的目标是其他浏览器，请使用“数据样式”属性提醒这些浏览器注意您的更改。“我想你已经试过这两种方法了？我只是尝试了灵活性，但没有帮助。我认为问题仅仅在于我的画布与div的交互方式。。。另外，您提供的stackoverflow链接也没有帮助，因为我的情况更复杂。编辑：除了在GitHub上的自述文件中包含灵活性之外，我不确定我应该如何使用灵活性：“如果您只针对InternetExplorer10及更低版本，请在CSS中的任何display:flex声明之前添加-js display:flex声明”和“如果您的目标是其他浏览器，请使用“数据样式”属性提醒这些浏览器注意您的更改。”我假设您已经尝试了这两种方法？flexbox浏览器兼容性：flexbox浏览器兼容性：

<div class="wrapper">
  <div class="divA"></div>
  <div class="divB">
    <canvas id="canvas"></canvas>
  </div>
  <div class="divC"></div>
</div>
<style type="text/css">
  * {
  box-sizing: border-box;
}
body {
  height: 100vh;
  margin: 0;
}
.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
}
.wrapper div {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border: 1px solid;
}
.wrapper .divB {
  border: none;
}
#canvas {
  vertical-align:top;
}
</style>

<script>
var canvas = document.getElementById("canvas");

var WIDTH = 500; // This could be anything! it comes from
//previous calculations which I did not include here because they are irelevant

document.getElementsByClassName('divB')[0].style.flex = '0 0 ' + WIDTH + 'px';

var width = document.getElementsByClassName('divB')[0].getBoundingClientRect().width;
var height = document.getElementsByClassName('divB')[0].getBoundingClientRect().height;

document.getElementById("canvas").style.width = width + 'px';
document.getElementById("canvas").style.height = height + 'px';
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, width, height);

// resize handler Ref: https://developer.mozilla.org/en-US/docs/Web/Events/resize
(function() {
  window.addEventListener("resize", resizeThrottler, false);
  var resizeTimeout;

  function resizeThrottler() {
    if (!resizeTimeout) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();
      }, 66);
    }
  }

  function actualResizeHandler() {
    var width = document.getElementsByClassName('divB')[0].getBoundingClientRect().width;
    var height = document.getElementsByClassName('divB')[0].getBoundingClientRect().height;

    document.getElementById("canvas").style.width = width + 'px';
    document.getElementById("canvas").style.height = height + 'px';
    ctx = canvas.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, width, height);
  }
}());
</script>