Привет всем!
Тут озадачился версткой html-рассылки, которая глючно отображается в gmail. Там примерно такая штука:
@media screen and (max-device-width: 640px), screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5), screen and (max-width: 767px) and (-o-min-device-pixel-ratio: 3/2), screen and (max-width: 767px) and (min--moz-device-pixel-ratio: 1.5), screen and (max-width: 767px) and (min-device-pixel-ratio: 1.5) {
.desktopversion { display: none !important; }
.mobileversion { display: block !important; float: none !important; width: 100% !important; height: auto !important; }
}
@media screen and (min-width: 641px) and (-webkit-max-device-pixel-ratio: 1.0), screen and (min-width: 641px) and (-o-max-device-pixel-ratio: 1/1), screen and (min-width: 641px) and (max--moz-device-pixel-ratio: 1.0), screen and (min-width: 641px) and (max-device-pixel-ratio: 1.0), screen and (min-width: 768px) {
.desktopversion { display: block !important; }
.mobileversion { display: none !important; }
}
Ну и блоки:
<div class="desktopversion" style="display: block;">
///
</div>
<!--[if !mso]> -->
<div class="mobileversion" style="display: none; float: left; width: 0; overflow: hidden;">
///
</div>
<!-- <![endif] -->
Блоки дублируют информацию, но первый desktopversion показывается на больших экранах, а mobileversion - на малых.
И всё бы хорошо, но gmail не хочет отображать корректно. Да, он показывает только один из блоков (например desktopversion), но у mobileversion он показывает стили float: left; width: 0; overflow: hidden; из-за которых внизу письма отображается большое пустое поле цвета фона. Остальные почтовики рисуют блоки корректно. Можно ли каким-то хаком заставить это заработать в gmail?