Ich habe ein sehr einfaches Dokument (siehe auch 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>
Aus irgendeinem Grund ist die svg
-Element erhält einen unteren Rand von 3 Pixel oder 4 Pixel (d. h. die body
Element bekommt eine Höhe von 1007px, 1008px oder sogar 1009px; das svg
margin selbst ist 0, wenn es mit den Browser-Debug-Tools untersucht wird.)
Wenn ich die ersetze svg
mit einer div
, der störende Rand verschwindet. Das Verhalten ist in Opera 12, Chrome 33, Firefox 26 und Internet Explorer 11 konsistent, daher bin ich zuversichtlich, dass das Verhalten von Natur aus und standardkonform ist. Ich verstehe es einfach nicht.
Dies ist ein häufiges Problem mit inline
Elemente. Um dies zu lösen, fügen Sie einfach hinzu vertical-align:top
.
AKTUALISIERTES BEISPIEL HIER
#foo {
background: #fff;
vertical-align:top;
}
Es ist erwähnenswert, dass der Standardwert für die vertical-align
Eigentum ist baseline
. Dies erklärt das Standardverhalten. Werte wie z top
, middle
und bottom
wird die Ausrichtung korrigieren.
Alternativ könnten Sie das Element machen block
eben. (Beispiel)
Ich hatte ein verwandtes Problem, bei dem ich ein div mit einem SVG hatte:
<div id=contents>
<svg exported from illustrator>
</div>
und es gab riesige Ränder über und unter dem SVG im DIV, sogar mit vertical-align:top im DIV und display:block im SVG.
Ich hatte “width:100%” für die SVGs eingestellt, damit sie die Seite füllen.
Die Lösung war zu setzen “height:100%” für die SVGs. Sie wurden bereits in der richtigen Höhe angezeigt, aber durch das Hinzufügen wurden die seltsamen Ränder beseitigt.
Ich würde gerne wissen, wie und warum das funktioniert hat.
Mein Dokument hatte ein einzelnes SVG-Element, dessen Größe mit dem Fenster geändert wurde. Ich habe CSS verwendet Überlauf versteckt um das Erscheinen von Bildlaufleisten zu verhindern. IE:
body {
overflow: hidden;
}
10718000cookie-checkFalscher Rand auf SVG-Elementyes