Избегайте переопределения CSS при загрузке нового HTML в div

Question

Введение

Я работаю над сетками кендо для функциональности почтового ящика пользователя. Электронные письма загружаются в сетку отлично, нет проблем, я могу чувствовать столько удовлетворения в моей голове. Я могу просмотреть детали каждого письма.

Problem начинается с подробного просмотра, когда сторонние электронные письма с обогащенным содержимым загружаются подробно div и переопределяют CSS веб-сайта. Легче представить, как может выглядеть основной сайт.

Исследование: я провел исследование, чтобы избежать этого переопределенного поведения, но оно кажется, нет другого решения, кроме specificity. Я не могу поменять CSS повсюду, чтобы избежать переопределения.

Редактировать

Другим вариантом было загрузить недавно загруженный html (email) в iframe, если он может решить проблемы iframe.

Если кто-то уже сталкивался с такой проблемой, пожалуйста, помогите. Любая помощь или ссылка будут оценены.

Спасибо за ваше время.

Answer 1

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

Например, Gmail очищает теги <style></style>, находит соответствующий elements и добавляет styling inline.

Outlook отображает содержимое внутри iframe, но большинство удаляет теги стиля.

С практической точки зрения я бы сказал, что выводить ваш контент, как Google, намного проще. Это означает, что вам придется использовать / создавать серверный препроцессор для правильной очистки содержимого электронной почты и добавления их в качестве встроенного стиля к соответствующим элементам.

Answer 2

Если вы используете какой-либо сторонний контент, такой как HTML или электронная почта, вы должны использовать iframe, чтобы избежать конфликтов CSS, которые могут исказить пользовательский интерфейс, и Межсайтовый скриптинг (XSS) , который может взломать вашу страницу или украсть ваши данные .