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

Estoy creando una extensión para Internet Explorer donde estoy inyectando tags 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 etiqueta “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 algo de CSS para “BODY”, “DIV” o “TABLE” -elementos heredados por mis elementos?

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

Hay (al menos) dos medios para hacer esto 1 , 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).

Use 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 tienes que especificar explícitamente casi todas las permutaciones posibles. Y siempre habrá casos límite que no se tienen en cuenta. Lo mejor sería usar nombres de clase para especificar los estilos para el nuevo contenido:

 .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 solo puedo pensar en estos dos en este momento.

CSS naturalmente “en cascada”, 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.

Deberías comenzar con una hoja de estilo de restablecimiento css . 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 */ } 

se convierte

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

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

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