Geek Answers Handbook

How to stop embedded HTML div / CSS from inherited styles? (Internet Explorer)

I am creating an extension for Internet Explorer where I click CSS style span tags on web pages. If a specific part of this component is clicked, a popup window is displayed.

This popup menu is actually a "DIV" element that I entered at the very end of the content page: s "BODY" -tag. I have a table with CSS styles inside this div, and depending on where I am, the appearance of this pop-up is according to the specification (in terms of width, etc.) or not.

I don’t have that much knowledge when it comes to CSS, etc., but can it be, because the parent page already has CSS for the “BODY”, “DIV” or “TABLE” elements that I inherited elements?

If so, is there any way to stop this?

+5
source share
3 answers

There are (at least) two ways to do this 1 but they are both a little dirty.

Use iframewith your own css (this way pages are shared by two completely different web pages).

Use increased specificity to orient the inserted html elements.

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 */
}

, . , . :

.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' */
  • .
+5

CSS "", , . , , , .

CSS HTML, . CSS, - , div -, . , div CSS, , , .

+2

css reset stylesheet. , html. , html div "23d4o829", reset, html, div.

,

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


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

.. css, .

EDIT: , iFrames, , .

0

More articles:


All Articles