Электронная почта HTML Development - Скрытие интерактивного контента для Gmail ⇐ Html

[Anonymous]

У меня есть нажатие, чтобы раскрыть элемент в моем электронном письме для клиентов на основе Webkit. Существует запасная сторона для Outlook и Gmail. Тем не менее, запасная сторона Gmail показывает как запасной, так и первый нажатие, чтобы показать изображение под ним. Нет проблем с Outlook, показывающими резерв и интерактивность, работающую в Apple Mail. См. Код ниже: < /p>

/* Fallback visible by default */
.fallback {
display: block;
max-width: 500px;
margin: 0 auto;
height: 300px;
}

.content,
input[type="radio"] {
display: none;
mso-hide: all;
}

/* Gmail fallback override */
u ~ div .content {
display: none !important;
max-height: 0 !important;
overflow: hidden !important;
}

u ~ div .fallback {
display: block !important;
max-height: none !important;
}

/* WebKit-only interactivity */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.fallback {
display: none !important;
mso-hide: all !important;
}

.content {
display: block !important;
}

input[type="radio"] {
display: inline-block !important;
}

.tap {
display: block !important;
mso-hide: all !important;
}

.reveal {
display: none !important;
}

#tapreveal:checked ~ .content .reveal-1 {
display: block !important;
}

#tapreveal2:checked ~ .content .reveal-2 {
display: block !important;
}

/* Ensure the tap image is hidden once interacted with */
#tapreveal:checked ~ .content .tap {
display: none !important;
}
}

.content {
position: relative;
max-width: 500px;
margin: 0 auto;
height: 300px;
overflow: hidden;
}

.tap,
.reveal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
z-index: 1;
}

.tap img,
.reveal img {
width: 100%;
height: auto;
display: block;
max-width: 100%;
margin: 0;
}

















< /code>



















Подробнее здесь: https://stackoverflow.com/questions/796 ... -for-gmail