16

次のマークアップを使用して、Chrome と IE9 で垂直スクロールバーが表示される理由を誰かが説明できますか:

<!DOCTYPE html>
<html>
  <head>
    <title>Fullscreen SVG</title>

    <style>
      html,body {
        margin: 0px; padding: 0px;
        width: 100%; height: 100%;    
      }

      .fullscreen {
        width: 100%; height: 100%;
      }
    </style>
  </head>
  <body>
    <svg class="fullscreen"></svg>
  </body>
</html>

svg を div に置き換えると、完全に機能します。しかし、その div 内に svg を配置すると、レイアウトが再び壊れます。

<div class="fullscreen">
  <svg></svg>
</div>

doctype を XHTML に変更すると、問題が解決するようです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

しかし、インライン SVG は HTML5 の一部なので...

その間、バグレポートも提出しました。

4

5 に答える 5

27

私はここで少し遅れていますが、別の問題を解決しようとしたときにこれに遭遇しました。

あなたが経験しているのはバグではないと思います。SVGタグはデフォルトでインライン要素であり（レコードの場合、IMGタグも同様です）、DIVはブロック要素と見なされます。高さ/幅をインラインオブジェクトに設定できないはずなので、ここで少し見捨てられます（SPANでこれを行おうとした場合、高さ/幅は無視されます）。

これは別の回避策と考えるかもしれませんが、displayプロパティを明示的にブロックに設定すると、スクロールバーが削除されます。SVG要素をフローティングするとこれも修正されます。

.fullscreen { display: block }

HTML5 DOCTYPEは、W3Cの厳密なDOCTYPES（移行ではない）に基づいているようです。どちらの厳密な宣言もスクロールバーを表示します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

したがって、この時点で、厳密なDOCTYPEと一時的なDOCTYPEに関心がある場合は、別の説明を参照することをお勧めします。厳密なDOCTYPEと一時的なDOCTYPEのブラウザレンダリングの違い

うまくいけば、これは議論に価値に少しの価値を追加します。

于 2011-03-16T20:15:54.553 に答える
15

コーリーの答えに基づいて構築するinlineか、inline-block要素はテキスト行の間に配置されることを意図しているため、「インライン」と呼ばれます。そのため、それらが表示される場所はどこでも、小文字の g、j、および y のぶら下がり部分が移動するテキスト行の下の領域である「降下」用にスペースが確保されます。

そのため、svg要素にdisplay: inline. Corey が指摘したように、プロパティで予約されたスペースの量を操作したり、line-heightを設定して完全に削除したりできます。display: block

img高さと幅をand要素に設定できると思います。svgこれは、CSS の用語では「置換」要素であり、通常のインライン要素とは動作が少し異なるためです。CSS 仕様では、これがどのように機能するかについて詳しく説明しています。仕様に関する限り、実際にはかなり読みやすいです。

于 2012-01-14T19:39:55.850 に答える
5

最も簡単な解決策は、CSS ルールoverflow:hiddenを html および/または body タグに追加することです。

html, body { overflow:hidden; }

編集

別の解決策には、XHTML doctype の使用が含まれます。これは Chrome で動作しますが、IE9 でも動作すると思われます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
于 2011-01-21T12:39:05.873 に答える
0

html と body で行ったように、svg タグのマージンとパディングをリセットしてみてください。svg のデフォルト スタイルである可能性があります。

于 2011-01-21T12:13:04.737 に答える
0

私には CSS の質問のように思えますが、これらの回答はもう確認しましたか?

于 2011-01-21T14:28:05.427 に答える