Why is there a vertical scrollbar on my svg at 100

2019-03-12 16:17发布

站内文章 / Html5
11 0 0

问题:

Can somebody explain why I see a vertical scrollbar in Chrome and IE9 with the following markup:

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

If I replace the svg with a div it works perfectly. But if I put the svg inside that div, the layout is broken again:

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

Changing the doctype to XHTML seems to fix the problem:

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

But inline SVG is a part of HTML5 so...

In the meantime I also filed a bug report.

回答1:

I'm a little late here, but I stumbled across this when I was trying to solve a different problem.

I don't think what you're experiencing is a bug. The SVG tag is an inline element by default (for the record, IMG tags are too) and DIVs are considered block elements. I'm thrown off a little here because you aren't supposed to be able to set height/width to inline objects (If you tried to do this on a SPAN, the height/width is ignored).

You might consider this another workaround, but explicitly setting the display property to block removes the scrollbar. Floating the SVG element would also fix this.

.fullscreen { display: block }

It appears that the HTML5 DOCTYPE is based off of the W3C's strict DOCTYPES (not the transitional). Both strict declarations also display the scroll bar.

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

So at this point, it might be best to refer to a different discussion if you care about strict vs transitional DOCTYPES: Browser Rendering Difference Between strict/transitional DOCTYPEs

Hopefully this adds a little value to value to the discussion.



回答2:

To build on Corey's answer, inline or inline-block elements are called "inline" because they are intended to be laid out amongst lines of text. So, wherever they appear, space is reserved for the "descent", which is the area underneath a line of text where the dangly parts of lowercase g's, j's, and y's go.

So that's where the extra space comes from when your svg element has display: inline. You can manipulate the amount of space reserved with the line-height property, or you can remove it altogether by setting display: block, as Corey noted.

I believe you're able to set the height and width on img and svg elements because they are, in CSS parlance, "replaced" elements, and behave a little differently than regular inline elements. The CSS spec explains how this works in more detail. And as far as specs go, it's actually pretty readable.



回答3:

The easiest solution would be to just add the CSS rule overflow:hidden to the html and/or the body tag. 

html, body { overflow:hidden; }

Edit

Another solution would involve using the XHTML doctype. This works in Chrome, and I suspect it works in IE9.

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


回答4:

Possibly try resetting the margin and padding on the svg tag, like you've done with html and body. Could be some default styles on the svg.



回答5:

Sounds like a CSS question to me, have you checked these answers already?



标签： html5 google-chrome svg fullscreen internet-explorer-9
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~