4

これは私を困惑させ、興味をそそります。

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 により、CSS ルールが定義するように親コンテナーを埋める代わりに、キャンバスの仕様が要求するデフォルトの幅/高さ (300x150) でキャンバスのサイズが変更されます。div などの他のブロック要素を変更しなくても、これが機能することを確認できます: http://jsfiddle.net/8AQVj/1/

繰り返しますが、キャンバス コンテキストのサイズではなく、画面上の要素のサイズについて話しているのです。動作は Chrome、Firefox、IE で一貫しているため、どこかの仕様に起因していると推測されますが、関連するフラグメントが見つかりませんでした。

4

1 に答える 1

0

キャンバスにあるサイズ属性は、これらの属性のデフォルトである自動に設定されているため、この場合はデフォルトのサイズを取得します。継承するように変更すると、タグ自体で指定されたコンテキストが特定のメジャーに設定されていても、親コンテナーがいっぱいになります。私が正しいことを確認するために、フィドルでチェックしました。

于 2013-07-15T16:46:13.547 に答える