¿Cómo evitar que HTML-div/CSS inyectado herede estilos? (Internet Explorer)

Question

Estoy creando una extensión para Internet Explorer donde estoy inyectando etiquetas de span con estilo CSS en páginas web. Si se hace clic en una parte específica de este componente, se muestra una ventana emergente.

Esta ventana emergente es en realidad un elemento "DIV" que estoy inyectando al final de la página de contenido: s "BODY". Tengo una tabla de estilo CSS dentro de este div, y dependiendo de en qué sitio esté, la apariencia de esta ventana emergente es según la especificación (en cuanto a ancho, etc.), o no.

No tengo tanto conocimiento cuando se trata de CSS y tal, pero ¿puede ser porque la página "principal" ya tiene algunos CSS para "BODY", "DIV" o "TABLE" -elementos que está siendo heredado por mis elementos?

Si este es el caso, ¿hay alguna forma de detener esto?

Answer 1

Hay (al menos) dos medios para hacer esto , pero ambos son un poco desordenados.

Utilice un iframe con su propio css (de esta forma las páginas están separadas por dos páginas web completamente diferentes).

Usa una mayor especificidad para apuntar a los elementos html insertados.

body { 
    /* targets the 'body', and these styles are inherited by its descendant elements */ 
} 

body div { 
    /* targets all divs that are contained within the 'body' element */ 
} 

body > div { 
    /* targets only divs that are directly contained within the body element */ 
    /* and these styles will/may be inherited by the children of these divs */ 
} 

El problema con este último enfoque es que tiene que especificar explícitamente casi todas las permutaciones posibles. Y siempre habrá casos límite que no se tienen en cuenta.Usted sería mejor fuera de uso de nombres de clase para especificar los estilos de los nuevos contenidos:

.insertedDiv { 
    /* this will apply to all elements of class 'insertedDiv', but may be overridden */ 
    /* by a more specific id-based selector such as '#container > .insertedDiv' */ 

---

1. Pero sólo puede pensar en estos dos en este momento.

Answer 2

CSS naturalmente "cascadas", lo que significa que si un elemento contenedor tiene una propiedad, sus hijos lo heredarán de forma predeterminada. Sin embargo, puede anular el valor de los elementos más específicos redefiniendo el estilo para ellos.

Tendrá que insertar CSS junto con el HTML que especifica todas las propiedades necesarias para su ventana emergente. A diferencia de la mayoría de los CSS, no podrá asumir ningún valor por defecto, deberá especificar para su div todo lo que pueda ser anulado por la página. Asegúrate de consultar específicamente el div por id en tu CSS para asegurarte de que tus estilos anulen el de la página y de que no te confines inadvertidamente con el formato de la página.

Answer 3

Debe comenzar con css reset stylesheet. Pero tiene que modificarse para que solo afecte a su html. Así que si envuelve su html en un div con una identificación como "23d4o829" puede usar editar cada regla en su hoja de estilo de reinicio por lo que solo afecta a html que está dentro de ese div.

Por ejemplo,

html, body { /* some stuff */ } 
table { /* more stuff */ } 

convierte

html #23d4o829, body #23d4o829 { /* some stuff */ } 
#23d4o829 table { /* more stuff */ } 

y así sucesivamente. Después de eso, puede tener todas las reglas CSS que necesita para controlar su apariencia.

EDIT: Creo que usar iFrames como lo menciona David Thomas es mejor.