@media print display: ninguno no funciona

Lo he intentado durante más de 3 semanas con diferentes implementaciones tratando de que la sección derecha no se muestre y que la sección izquierda se muestre en todo el ancho. Dado que mi investigación muestra que no hay una manera fácil o simplificada de renderizar rápidamente las vistas de impresión sin revisar la vista previa de impresión, pido ayuda para resolver esto.

el css de medios impresos que no funciona es este:

#gc {
    width: 100%;
}
#asideTrack {
/*      width: 100%;*/
    display: none;
}
.asideTrack {
/*      width: 100%;*/
    display: none;
}
.slideAside {
/*      width: 100%;*/
    display: none;
}
#slideAside {
    display:none
}

¿Alguna sugerencia?

preguntado el 28 de julio de 12 a las 07:07

El bloque aparte no se muestra en la vista previa de impresión (probado en Firefox e IE), por lo que el problema parece ser diferente a lo que dicen el encabezado y la descripción. Antes de aclarar la descripción del problema, consulte los errores sintácticos. El validador de marcas del W3C informa 53 errores y el validador CSS del W3C informa 43 errores (cuando se especifica CSS3 y las extensiones del proveedor se tratan solo como advertencias). -

sí, no son visibles, pero la visualización en la vista previa de impresión no es la misma que si ocultara manualmente el aSide. El ancho del lado izquierdo no se 'ajusta' a un ancho completo. La sección todavía está presente, solo que no es visible. -

1 Respuestas

En CSS, la regla inferior sobrescribe la superior si tienen la misma prioridad (según el selector)

Usted escribe su css común no en el bloque @media, y es más bajo que su bloque de impresión @media, por lo que sobrescribe sus estilos de impresión @media. Por ejemplo, es por qué en la vista previa de impresión su bloque izquierdo tiene un ancho del 74% (porque esta regla es más baja que la regla del bloque de impresión @media donde dice que es 100%).

Espero que sea útil.

Solutions

  1. En su archivo css, puede colocar el bloque de impresión de medios al final del archivo.
  2. Añada !important directivas a algunas reglas en el bloque de impresión de medios. es decir: p { color: rojo !importante; }
  3. Coloque su css especial para la pantalla en el bloque de pantalla de medios.

Respondido 30 Abr '13, 15:04

Entonces, ¿cómo anulo la regla inferior con el bloque @media? - chris frisina

lo !importante funcionó. Gracias. No sabía sobre el pedido. una vez más, una razón por la que todavía necesito [esto] [1] [1]: stackoverflow.com/questions/11161631/… - chris frisina

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.