Почему на моем 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>

Изменение типа документа на XHTML, похоже, решает проблему:

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

Но встроенный SVG является частью HTML5, так что...

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


svg google-chrome html fullscreen internet-explorer-9
person Jan    schedule 21.01.2011    source источник

Ответы (5)


arrow_upward
27
arrow_downward

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

Я не думаю, что то, что вы испытываете, является ошибкой. Тег 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

Надеюсь, это добавит немного ценности обсуждению.

person Corey Docken    schedule 16.03.2011
comment
Странно, что я могу установить ширину и высоту для встроенного элемента. и он становится больше, чем когда он объявлен как блок. Спасибо за подсказку. Проверка вычисленного svg css в Chrome dev. tools действительно показывает, что он встроен по умолчанию. - person Jan; 16.03.2011

arrow_upward
15
arrow_downward

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

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

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

person adamesque    schedule 14.01.2012

arrow_upward
5
arrow_downward

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

html, body { overflow:hidden; }

Изменить

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
person Coin_op    schedule 21.01.2011
comment
Это не решение, это обходной путь. Мне не нужны обходные пути, я могу придумать их сам. Я ищу, есть ли причина такого поведения или это ошибка. Я дам вам +1, потому что это может быть полезно для тех, у кого такая же проблема и кто ищет практический ответ. - person Jan; 21.01.2011
comment
Это тонкая грань между решением и обходным путем. Если вы укажете правильный тип документа в своем примере, он отобразится без полос прокрутки ‹!DOCTYPE html PUBLIC --//W3C//DTD XHTML 1.0 Transitional//EN w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd› Или, по крайней мере, в Chrome, у меня нет IE9 установлен. - person Coin_op; 21.01.2011
comment
<!Doctype html> — правильный тип документа, я хочу использовать HTML5. - person Jan; 21.01.2011

arrow_upward
0
arrow_downward

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

person Stuart Memo    schedule 21.01.2011
comment
нет, уже пробовал, обнаружил еще несколько странностей: svg внутри div тоже вызывает проблемы. - person Jan; 21.01.2011

arrow_upward
0
arrow_downward

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

person Erik Dahlström    schedule 21.01.2011