2010-10-15 2 views
0

Я показываю HTML-письма на странице, и часто они имеют общую информацию о стиле, которую мне нужно изолировать с главной страницы. Например, если электронное письмо выглядит примерно так:Изолировать CSS в элементе из остальной части страницы

<style type="text/css"> 
body { background-color:#000; } 
</style> 
<div> 
    email's content here 
<div> 

В итоге я получаю черный фон на всей странице.

Я пробовал iframe, но мне нужно, чтобы высота контента была динамической (я не знаю, насколько велика каждая электронная почта до тех пор, пока она не будет визуализирована), что, по-видимому, можно делать только с javascript. Это вариант, но он кажется довольно взломанным. Есть ли стандартный, чистый способ сделать это?

ответ

1

Если ваши ограничения позволяют это, вы можете отображать каждое электронное письмо в своем собственном iframe.

0

Поместите уникальный класс или идентификатор на содержащий DIV и использовать его в качестве селектора для всех стилей:

<style type="text/css"> 
    div#emailcontent { ... } 
</style> 

<div id="emailcontent"> 
    ... 
</div> 

Это немного боли, но это единственный способ ограничить стили только часть страницы.

+0

Вы имеете в виду обернуть все css из письма одним большим селектором? Это правильный CSS? Кажется, это не работает для меня. Что-то вроде #wrapper {# email_id1 {color: # 000;} # email_id2 {color: #FFF;}}? – smurthas

+0

Нет, вам придется писать '#wrapper # email_id1 {...}', '#wrapper # email_id2 {...}' и так далее. Вложенный CSS будет удобен для SOOOO, поэтому, конечно, этого никогда не произойдет. W3C не будет полезен. –

+0

Ах, вот что я подозревал. В этом случае, похоже, что iframe с изменением размера javscript, вероятно, будет лучшим вариантом. – smurthas

0

Для электронной почты HTML я предлагаю использовать встроенный CSS. Когда-то уникальный класс или идентификатор не работают на других клиентах электронной почты. И не используйте java-скрипт в электронных письмах тоже, использование javascript не приемлемо в маркетинге электронной почты. Пожалуйста, используйте жесткий код для всех тегов с встроенным кодом, совместимым с перекрестными почтовыми клиентами.

тэг p должен преобразовываться в тег span; в кросс-браузере, тэг p дает некоторые отступы и разметку. тэг хорош для всего раздела абзаца, если вы хотите использовать. Убедитесь, что вы определили встроенный код в каждом теге:

< span class = "headlines" style = "font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: normal; color : # 03588c; line-height: 18px; "> foo </span>

Margin и Padding не должны использоваться в кодировке css для HTML. Это не работает в перекрестных почтовых клиентах.

Смежные вопросы