Разработка HTML для электронной почты: скрытие интерактивного контента для Gmail ⇐ Html

[Anonymous]

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

Код: Выделить всё

/* 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;
}









[url=xx]
[img]xx[/img]
[/url]















[img]xx[/img]




[url=xx]
[img]xx[/img]
[/url]

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