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

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

14 голосов
/ 21 января 2011

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

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

Ответы [ 5 ]

24 голосов
/ 16 марта 2011

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

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

Вы можете подумать, что это еще один обходной путь, но явная установка свойства display для блокировки удаляет полосу прокрутки.Плавающий элемент 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">

Так что на этом этапе, возможно, лучше обратиться к другой дискуссии, если вы заботитесь о строгом или переходном режиме./ transitional DOCTYPEs

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

14 голосов
/ 14 января 2012

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

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

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

5 голосов
/ 21 января 2011

Самое простое решение - просто добавить правило 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">
0 голосов
/ 21 января 2011

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

0 голосов
/ 21 января 2011

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

...