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

Может кто-нибудь объяснить, почему я вижу вертикальную полосу прокрутки в Chrome и IE9 со следующей разметкой:Почему вертикальная полоса прокрутки на моем svg на 100%?

<!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, так ...

Тем временем я также подал bug report.

источник

2011-01-21 Jan

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

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

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

.fullscreen { display: block }

Оказывается, что DOCTYPE HTML5 базируется строгим 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: Browser Rendering Difference Between strict/transitional DOCTYPEs

Надеется, это добавляет немного значения ценности для обсуждения.

источник

2011-03-16 20:15:54

Странно, что я могу задать ширину и высоту встроенного элемента. и он становится больше, чем когда он объявлен как блок. Спасибо за подсказку. Проверка вычисленного svg css в Chrome dev. инструменты действительно показывают, что он встроен по умолчанию. – Jan

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

источник

2011-01-21 12:13:04

Нет, уже попробовал это, нашел еще более странное поведение: svg внутри div также вызывает проблемы. – Jan

Простейшим решением было бы просто добавить правило 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">

источник

2011-01-21 12:39:05

Это не решение, это обходной путь. Мне не нужны обходные пути, я могу придумать это сами. Я ищу, есть ли причина для этого поведения или это ошибка. Я дам вам +1, потому что это может быть полезно для кого-то с той же проблемой и ищет практический ответ. – Jan

Его тонкая грань между решением и обходным путем. Если вы добавите правильный тип doctype в свой пример, он отобразится без полос прокрутки Или, по крайней мере, в Chrome у меня нет IE9. –

'' является правильным doctype, я хочу использовать HTML5. – Jan

Похоже CSS вопрос ко мне, вы проверили these answers уже?

источник

2011-01-21 14:28:05

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

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

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

источник

2012-01-14 19:39:55 adamesque

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

ответ

Смежные вопросы