Question

这让我很困惑，我很有意思。

我很感兴趣，如果任何人都能在源中指出我在CSS /画布规范方面的行为差异，我知道如何填充父容器的其他解决方案所以请不要这样答案。

考虑这个HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <style type="text/css">
      html, body, #container {
        height: 100%; width: 100%; padding: 0; margin: 0;
      }

      #container {
        position: relative;
      }

      #content {
        position: absolute;
        border: 1px solid red;
        background-color: blue;

        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        height: auto;
      }
    </style>
  </head>

  <body>
    <div id="container">
      <canvas id="content"></canvas>
    </div>
  </body>
</html>

JSFiddle：http://jsfiddle.net/2zH5H/。此HTML导致画布使用画布规范调用的默认宽度/高度（300x150）进行调整，而不是像CSS规则定义的那样填充父容器。您可以验证此工作，而不对任何其他块元素进行任何更改，例如div：http://jsfiddle.net/8AQVj/1/

同样，我们讨论的是屏幕上元素的大小，而不是画布上下文的维度。 Chrome，Firefox和IE中的行为是一致的，所以我想它必须源于某个地方的规范，但我找不到相关的片段。

Answer 1

画布的大小属性设置为auto，这是这些属性的默认值，因此在这种情况下您将获得默认大小。如果将其更改为继承，则它将填充其父容器，即使其在标记本身中指定的上下文设置为特定度量。为了确保我是对的，我把它放在小提琴里。

CSS定位画布的大小与其他块元素不同（左上角右下属性的约束）

1 个答案: