¿Por qué hay una barra de desplazamiento vertical en mi svg al 100%?

Puede alguien explicar por qué veo una barra de desplazamiento vertical en Chrome e IE9 con el siguiente marcado:¿Por qué hay una barra de desplazamiento vertical en mi 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>

Si puedo reemplazar el SVG con un div que funciona perfectamente. Pero si pongo el SVG dentro de ese div, el diseño se rompe de nuevo:

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

Cambiar el tipo de documento a XHTML parece solucionar el problema:

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

pero SVG en línea es una parte de HTML5 por lo ...

Mientras tanto, también archivé bug report.

Fuente

2011-01-21 Jan

Llego un poco tarde aquí, pero me encontré con esto cuando estaba tratando de resolver un problema diferente.

No creo que lo que estás experimentando sea un error. La etiqueta SVG es un elemento en línea por defecto (para el registro, las etiquetas IMG también lo son) y los DIV se consideran elementos de bloque. Estoy un poco decepcionado porque se supone que no puedes establecer el alto/ancho para los objetos en línea (si trataste de hacer esto en un SPAN, se ignoraría el alto/ancho).

Puede considerar esta otra solución, pero establecer explícitamente la propiedad de visualización para bloquear elimina la barra de desplazamiento. Flotar el elemento SVG también arreglaría esto.

.fullscreen { display: block }

Parece ser que el DOCTYPE HTML5 se basa apagado de DOCTYPES estrictas del W3C (no la transición). Ambas declaraciones estrictas también muestran la barra de desplazamiento.

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

Así que en este punto, podría ser mejor para referirse a una discusión diferente si se preocupan por estrictas vs DOCTYPES de transición: Browser Rendering Difference Between strict/transitional DOCTYPEs

Esperamos que esto añade un poco de valor a valorar a la discusión.

Fuente

2011-03-16 20:15:54

Es extraño que pueda establecer el ancho y la altura de un elemento en línea. y se vuelve más grande que cuando se declara como bloque. Gracias por la pista. Inspeccionando svg css calculado en Chrome dev. herramientas de hecho muestra que está en línea por defecto. – Jan

Posiblemente intente restablecer el margen y el relleno en la etiqueta svg, como lo ha hecho con html y body. Podría haber algunos estilos predeterminados en el svg.

Fuente

2011-01-21 12:13:04

no, ya lo intenté, encontré algunos comportamientos más extraños: svg dentro de div también causa problemas. – Jan

La solución más fácil sería simplemente agregar la regla CSS overflow:hidden a la etiqueta html y/o cuerpo.

html, body { overflow:hidden; }

Editar

Otra solución podría implicar el uso de la DOCTYPE XHTML. Esto funciona en Chrome, y sospecho que funciona en IE9.

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

Fuente

2011-01-21 12:39:05

No es una solución, eso es una solución. No quiero soluciones, puedo pensar en ellas. Estoy buscando si hay una razón para este comportamiento o es un error. Le daré +1 porque esto podría ser bueno para alguien con el mismo problema y buscando una respuesta práctica. – Jan

Es una línea fina entre una solución y una solución. Si inserta un doctype apropiado en su ejemplo, se muestra sin las barras de desplazamiento O al menos lo hace en Chrome, no tengo IE9 instalado. –

'' es un tipo de documento adecuado, quiero usar HTML5. – Jan

Suena como una pregunta CSS para mí, ¿has comprobado these answers ya?

Fuente

2011-01-21 14:28:05

Para construir en la respuesta de Corey, los elementos inline o o se denominan "en línea" porque están destinados a distribuirse entre líneas de texto. Entonces, donde sea que aparezcan, el espacio está reservado para el "descenso", que es el área debajo de una línea de texto donde van las partes dangly de minúsculas g's, j's e y's.

De ahí viene el espacio extra cuando su elemento svg tiene display: inline. Puede manipular la cantidad de espacio reservado con la propiedad line-height, o puede eliminarla por completo configurando display: block, como anotó Corey.

Creo que es capaz de ajustar la altura y la anchura de img y svg elementos, ya que son, en lenguaje CSS, "sustituido" elementos, y se comportan de manera un poco diferente a los elementos en línea regulares. The CSS spec explica cómo funciona esto en más detalle. Y en lo que respecta a las especificaciones, en realidad es bastante legible.

Fuente

2012-01-14 19:39:55 adamesque

¿Por qué hay una barra de desplazamiento vertical en mi svg al 100%?

Respuesta

Cuestiones relacionadas