在旧浏览器中显示弹性框

Question

首先我将解释我到目前为止所拥有的； 一个始终位于页面中间的动态画布，它的宽度由 javascript 计算计算，因此它可能会有所不同，之后将一些 flexbox div 添加到它的两侧并且它们平等地填充页面的其余部分（它的工作方式相同即使使用 CTRL 调整大小）：

https://jsfiddle.net/62g1mqw0/2/

<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>

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

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

Answer 1

您可能会通过使用 polyfill 为自己节省大量时间和挫败感 - 为了获得完整的浏览器支持，您将完全需要。

最受欢迎的似乎是Flexibility。

如果您不想走 polyfill 路线，您可以关注几年前 this question 的一些答案。