Паразитный запас на элементе svg

У меня очень простой документ (см. также JSFiddle):

<style>
html, body, svg, div {
    margin: 0;
    padding: 0;
    border: 0;
}
</style>
<body>
<svg id="foo"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   style="width: 768px; height: 1004px;">
</svg>
</body>

По какой-то причине элемент svg получает нижнее поле 3px или 4px (то есть элемент body получает высоту 1007px, 1008px или даже 1009px; сам край svg равен 0 при проверке с использованием инструменты отладки браузера.)

Если я заменил svg на div, ложный запас исчезнет. Поведение согласовано между Opera 12, Chrome 33, Firefox 26 и Internet Explorer 11, поэтому я уверен, что поведение по дизайну и стандартам совместимо, я просто не понимаю.

Ответ 1

Это обычная проблема с элементами inline. Чтобы решить эту проблему, просто добавьте vertical-align:top.

ОБНОВЛЕНО ПРИМЕР ЗДЕСЬ

#foo {
    background: #fff;
    vertical-align:top;
}

Стоит отметить, что значением по умолчанию для свойства vertical-align является baseline. Это объясняет поведение по умолчанию. Значения, такие как top, middle и bottom, будут корректировать выравнивание.

В качестве альтернативы вы можете сделать уровень элемента block. (пример)

Ответ 2

У меня была связанная проблема, когда у меня был div, содержащий SVG:

<div id=contents>
    <svg exported from illustrator>
</div>

и были большие границы над SVG в DIV и ниже, даже с вертикальным выравниванием: сверху в DIV и отображать: блок в SVG.

Я установил "width: 100%" для SVG, чтобы они заполнили страницу.

Решением было установить "height: 100%" для SVG. Они уже отображались на правильной высоте, но добавив, что это избавилось от странных полей.

Я хотел бы знать, как и почему это сработало.

Ответ 3

В моем документе был один элемент svg, размер которого изменился с помощью окна. Я использовал CSS переполнение: скрытый, чтобы предотвратить появление полос прокрутки. IE:

    body {
        overflow: hidden;
    }