Почему есть вертикальная полоса прокрутки на моем svg на 100%?

Может кто-нибудь объяснить, почему я вижу вертикальную полосу прокрутки в 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, он отлично работает. Но если я положил svg внутри этого div, макет снова сломался:

<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, поэтому...

Тем временем я также опубликовал отчет об ошибке .

Ответ 1

Я немного опаздываю здесь, но я наткнулся на это, когда пытался решить другую проблему.

Я не думаю, что вы испытываете ошибку. Тег SVG является встроенным элементом по умолчанию (для записи также есть теги IMG), а DIV - элементы блоков. Я немного отброшен, потому что вы не должны устанавливать высоту/ширину для встроенных объектов (если вы пытались сделать это на SPAN, высота/ширина игнорируется).

Вы можете подумать об этом другом обходном пути, но явно устанавливая свойство отображения для блокировки, удаляет полосу прокрутки. Плавающий элемент SVG также исправит это.

.fullscreen { display: block }

Похоже, что HTML5 DOCTYPE основан на строгих DOCTYPES W3C (а не на переходном). Оба строгие объявления также отображают полосу прокрутки.

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

Итак, на данном этапе лучше всего обратиться к другому обсуждению, если вы беспокоитесь о строгих или переходных DOCTYPES: Разница между браузерами между строгими/переходными DOCTYPE

Надеюсь, это добавит небольшое значение для обсуждения.

Ответ 2

Чтобы построить ответ Кори, элементы inline или inline-block называются "встроенными", потому что они предназначены для размещения среди строк текста. Таким образом, везде, где они появляются, пространство зарезервировано для "спуска", которое является областью под строкой текста, где dangly части нижнего регистра g, js и y go.

Итак, когда дополнительное пространство возникает, когда ваш элемент svg имеет display: inline. Вы можете манипулировать объемом пространства, зарезервированного с помощью свойства line-height, или вы можете полностью удалить его, установив display: block, как отметил Кори.

Я считаю, что вы можете установить высоту и ширину на элементах img и svg, потому что они в элементе CSS, "заменены" и ведут себя немного иначе, чем обычные встроенные элементы. Спецификация CSS объясняет, как это работает более подробно. И что касается спецификаций, это действительно довольно удобочитаемо.

Ответ 3

Самое простое решение - просто добавить правило CSS overflow:hidden в тег html и/или body.

html, body { overflow:hidden; }

Edit

Другим решением будет использование доктрины XHTML. Это работает в Chrome, и я подозреваю, что он работает в IE9.

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

Ответ 4

Возможно, попробуйте сбросить маржу и прописку в теге svg, как вы это сделали с html и телом. Могут быть некоторые стили по умолчанию на svg.

Ответ 5

Звучит как вопрос CSS для меня, вы уже проверили эти ответы?