У меня очень простой документ (см. также 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, поэтому я уверен, что поведение по дизайну и стандартам совместимо, я просто не понимаю.
Это обычная проблема с элементами inline. Чтобы решить эту проблему, просто добавьте vertical-align:top.
#foo {
background: #fff;
vertical-align:top;
}
Стоит отметить, что значением по умолчанию для свойства vertical-align является baseline. Это объясняет поведение по умолчанию. Значения, такие как top, middle и bottom, будут корректировать выравнивание.
В качестве альтернативы вы можете сделать уровень элемента block. (пример)
У меня была связанная проблема, когда у меня был div, содержащий SVG:
<div id=contents>
<svg exported from illustrator>
</div>
и были большие границы над SVG в DIV и ниже, даже с вертикальным выравниванием: сверху в DIV и отображать: блок в SVG.
Я установил "width: 100%" для SVG, чтобы они заполнили страницу.
Решением было установить "height: 100%" для SVG. Они уже отображались на правильной высоте, но добавив, что это избавилось от странных полей.
Я хотел бы знать, как и почему это сработало.
В моем документе был один элемент svg, размер которого изменился с помощью окна. Я использовал CSS переполнение: скрытый, чтобы предотвратить появление полос прокрутки. IE:
body {
overflow: hidden;
}