Как избавиться от родительских стилей веб-страниц

Question

Я разрабатываю расширение Google Chrome.

Расширение показывает диалоговое окно (jquery ui, как div) внутри любой веб-страницы, в диалоговом окне пользователь может добавить некоторый контент [HTML-контент без тела, безинформация о стилях].

Проблема, с которой я сталкиваюсь, заключается в том, что стили, указанные на веб-странице, применяются к диалоговому окну jquery, а пользователь добавляет контент.

Например,когда я запускаю свой плагин на веб-странице stackoverflow, весь текст выравнивается по центру и т. д. и т. д.

Каков наилучший способ избавиться от родительских стилей внутри div?

Answer 1

Вы должны посмотреть на таблицы стилей сброса, которые поставляются почти со всеми CSS-фреймворками.Вы можете взять эту таблицу стилей сброса и применить все стили сброса к вашему конкретному DIV:

div.YourDiv, div.YourDiv * {
   margin:0;
   padding:0;
   border:0;
   ...
}

, который должен сбрасывать как YourDiv, так и все элементы ниже.После этого вы можете приступить к стилизации подэлементов по своему усмотрению.

Answer 2

Я сделал это с помощью IFRAME, который в основном создает совершенно новый HTML-документ внутри блока без стилей из «родительской» страницы.Другой вариант - переопределить все стили в вашем div, но это очень утомительно и безобразно.