Perché c'è una barra di scorrimento verticale sul mio svg al 100%?

Qualcuno può spiegare perché vedo una barra di scorrimento verticale in Chrome e IE9 con il seguente markup:Perché c'è una barra di scorrimento verticale sul mio svg al 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>

Se si sostituisce la svg con un div funziona perfettamente. Ma se ho messo lo svg interno che div, il layout è rotto di nuovo:

<div class="fullscreen"> 
    <svg></svg> 
</div>

Cambiare il doctype a XHTML sembra risolvere il problema:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ma SVG in linea è una parte di HTML5 così ...

Nel frattempo ho anche depositato un bug report.

fonte

2011-01-21 Jan

Sono un po 'in ritardo qui, ma mi sono imbattuto in questo quando stavo cercando di risolvere un altro problema.

Non penso che quello che stai vivendo sia un bug. Il tag SVG è un elemento in linea per impostazione predefinita (per il record, anche i tag IMG) e DIV sono considerati elementi di blocco. Sono un po 'buttato qui perché non dovresti essere in grado di impostare altezza/larghezza per gli oggetti in linea (se hai provato a farlo su uno SPAN, l'altezza/larghezza viene ignorata).

Questa soluzione alternativa potrebbe essere presa in considerazione, ma l'impostazione esplicita della proprietà di visualizzazione per il blocco rimuove la barra di scorrimento. Anche il floating dell'elemento SVG lo risolverebbe.

.fullscreen { display: block }

Sembra che il DOCTYPE HTML5 è basata fuori di rigidi DOCTYPE del W3C (non la transizione). Entrambe le dichiarazioni rigide mostrano anche la barra di scorrimento.

<!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">

Quindi a questo punto, potrebbe essere meglio per fare riferimento a una discussione diversa se ti interessa severe vs DOCTYPE transitorie: Browser Rendering Difference Between strict/transitional DOCTYPEs

Speriamo che questo aggiunge un po 'di valore al valore alla discussione.

fonte

2011-03-16 20:15:54

È strano che io possa impostare larghezza e altezza a un elemento in linea. e diventa più grande di quando è dichiarato come blocco. Grazie per il suggerimento. Ispezione del cv svg computato in Chrome dev. gli strumenti in effetti mostrano che è in linea per impostazione predefinita. – Jan

Forse provare a reimpostare il margine e il padding sul tag svg, come hai fatto con html e body. Potrebbero esserci alcuni stili predefiniti sullo svg.

fonte

2011-01-21 12:13:04

no, già provato, trovato alcuni comportamenti più strani: svg all'interno del div causa anche problemi. – Jan

La soluzione più semplice sarebbe semplicemente aggiungere la regola CSS overflow:hidden all'html e/o al tag del corpo.

html, body { overflow:hidden; }

Modifica

Un'altra soluzione comporterebbe utilizzando il doctype XHTML. Funziona su Chrome e ho il sospetto che funzioni in IE9.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

fonte

2011-01-21 12:39:05

Questa non è una soluzione, è una soluzione alternativa. Non voglio soluzioni alternative, posso inventarle io stesso. Sto cercando se c'è un motivo per questo comportamento o è un bug. Ti darò +1 perché questo potrebbe essere buono per qualcuno con lo stesso problema e in cerca di una risposta pratica. – Jan

È una linea sottile tra una soluzione e una soluzione alternativa. Se si inserisce un doctype appropriato nell'esempio, viene visualizzato senza le barre di scorrimento O almeno lo fa in Chrome, non ho installato IE9. –

'' è un doctype appropriato, voglio usare HTML5. – Jan

suona come una domanda CSS per me, hai controllato these answers già?

fonte

2011-01-21 14:28:05

Per costruire la risposta di Corey, gli elementi inline o inline-block sono denominati "in linea" perché devono essere disposti tra linee di testo. Quindi, ovunque appaiano, lo spazio è riservato alla "discesa", che è l'area al di sotto di una riga di testo in cui si trovano le parti dangly di lettere minuscole, j's e y.

Ecco da dove viene lo spazio extra quando l'elemento svg ha display: inline. È possibile modificare la quantità di spazio riservato con la proprietà line-height oppure rimuoverla del tutto impostando display: block, come notato da Corey.

Credo che sia possibile impostare l'altezza e la larghezza sugli elementi img e svg perché sono, in linguaggio CSS, elementi "sostituiti" e si comportano in modo leggermente diverso rispetto agli elementi in linea regolari. The CSS spec spiega come funziona in modo più dettagliato. E per quanto riguarda le specifiche, è in realtà piuttosto leggibile.

fonte

2012-01-14 19:39:55 adamesque

Perché c'è una barra di scorrimento verticale sul mio svg al 100%?

risposta

Problemi correlati