Averigüe qué elementos HTML fuerzan a la página/bloque/sección a ser ancha/alta

Estoy intentando cambiar una página HTML (con muchos CSS). Hay un <table> que es 'demasiado ancho'. No puedo ver por qué es amplio. Uno de los subnodos debe tener algún tipo de regla de css width: $A_BIG_NUMBER; que lo amplíe, lo que propicia y amplía todo.Averigüe qué elementos HTML fuerzan a la página/bloque/sección a ser ancha/alta

Mi enfoque habitual es mirar manualmente todos los elementos (o los que creo que son responsables) para tratar de encontrar esta regla css.

¿Hay alguna manera más fácil?

Fuente

2011-05-19 Rory

Si está utilizando Chromium, simplemente haga clic con el botón derecho, seleccione "Comprobar elemento" (o lo que sea, su "Elemento überprüfen" en la versión alemana). Luego se abre un "inspector". Allí puede seleccionar la etiqueta de la tabla. A la derecha, encontrará una lista con declaraciones CSS reconocidas, incluido. los nombres de archivo. (Es un poco como Firebug para Firefox, mucho más rápido.)

Fuente

2011-05-19 14:55:07 feeela

Sí, estoy usando el 'Element Inspector', sin embargo eso todavía implica una gran cantidad de comprobación manual, ya que tengo que pasar por todos los subelementos. ¿No hay alguna extensión que muestre los tamaños? – Rory

@Rory Si pasa el mouse sobre las etiquetas en la vista del inspector, los elementos están muy resaltados, de modo que se puede ver de un vistazo cuáles son sus dimensiones. También hay una pestaña "Métricas" debajo de la vista de estilos en el panel derecho del inspector. – feeela

Sí, las métricas son buenas para ver el tamaño de ciertos elementos (también he estado mirando el 'Estilo de equipo'), sin embargo, aún necesito revisar todos los elementos manualmente. – Rory

Me encuentro con estos problemas de ancho "misterioso" bastante - especialmente cuando trato de discutir un tema de código abierto donde no soy el autor de la mayoría del código

Pruebe agregar algunos wireframes a su CSS. Use esto en además de para usar un inspector web de desarrollador para encontrar al culpable (safari, IE, Chrome ahora viene con herramientas de desarrollador listas para usar, firebug para firefox).

body { margin: 30px; } 
/* Add some margin to the body to add space and 
see where your offending elements cross the line */ 

body * { border: 1px solid red; } 
/* add a border to all other elements on the page */

Fuente

2014-05-27 20:17:17 squarecandy

Buen consejo. No se ha visto el truco 'body * ...' antes que me ayudó a detectar un elemento ofensivo en unos 5 segundos en una página grande. – Ben

Funcionó para mí, también. Eso, y la búsqueda de 'width: A_BIG_NUMBER' como OP sugirió arrojó' body {min-width: 600; } 'acechando en mi css. Lección/pseudo-respuesta: no seas demasiado orgulloso para considerar la respuesta obvia. –

truco muy agradable. Lo usé incluso con margen: 0px; y me ayudó a encontrar qué elemento tiene ancho extra. ¡Gracias! –

Averigüe qué elementos HTML fuerzan a la página/bloque/sección a ser ancha/alta

Respuesta

Cuestiones relacionadas