Как остановить Injected HTML-div / CSS от наследования стилей? (Internet Explorer)

Question

Я создаю расширение для Internet Explorer, где я вставляю теги span в стиле CSS на веб-страницы. Если щелкнуть конкретную часть этого компонента, появится всплывающее окно.

Это всплывающее окно в действительности является элементом "DIV", который я вставляю в самый конец страницы содержимого: тег "BODY". У меня есть таблица в стиле CSS внутри этого div, и в зависимости от того, на каком сайте я нахожусь, внешний вид этого всплывающего окна либо соответствует спецификации (в отношении ширины и т. Д.), Либо нет.

У меня не так много знаний, когда дело доходит до CSS и тому подобного, но это может быть потому, что на «родительской» странице уже есть некоторый CSS для элементов «BODY», «DIV» или «TABLE», который наследуется моими элементами?

Если это так, есть ли способ остановить это?

Answer 1

Есть (по крайней мере) два способа сделать это ¹ , но они оба немного грязные.

Используйте iframe со своим собственным CSS (таким образом, страницы разделяются двумя совершенно разными веб-страницами).

Использовать повышенную специфичность для таргетинга на вставленные HTML-элементы.

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

<ч />

1. Но сейчас я могу думать только об этих двоих.

Answer 2

CSS естественным образом «каскадирует», то есть если у элемента контейнера есть свойство, его дети по умолчанию наследуют его. Однако, конечно, вы можете переопределить значение для более конкретных элементов, переопределив стиль для них.

Вам нужно будет внедрить CSS вместе с HTML, который определяет все необходимые свойства для вашего всплывающего окна. В отличие от большинства CSS, вы не сможете принять какие-либо значения по умолчанию, вам нужно будет указать для вашего div что-нибудь, что может быть переопределено страницей. Убедитесь, что вы обращаетесь к div конкретно по id в вашем CSS, чтобы убедиться, что ваши стили переопределяют стиль страницы, и что вы случайно не путаетесь с форматированием страницы.

Answer 3

Вы должны начать с css reset таблицы стилей .Но это должно быть изменено, чтобы повлиять только на ваш HTML.Поэтому, если вы заключите свой HTML в элемент div с идентификатором, подобным «23d4o829», вы можете использовать редактирование каждого правила в своей таблице стилей сброса, чтобы оно влияло только на HTML, который находится внутри этого элемента.

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

становится

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

и так далее.После этого вы можете иметь все правила CSS, необходимые для управления вашей внешностью.

РЕДАКТИРОВАТЬ: Я думаю, что лучше использовать iFrames, как упомянуто Дэвидом Томасом.