wbudowane style obramowania w wiadomości e-mail w formacie HTML

Question

Pracuję nad responsywnym e-mailem HTML i mam problem z renderowaniem w TYLKO w Gmailu w IE (tak musiało być). Działa dobrze w pozostałych 27 wersjach klienta. musimy wspierać

mam założyć skrzypce tutaj: http://jsfiddle.net/39gzj/

Teraz, jeśli spojrzeć na kod, widać, że istnieje granica, która jest szara, który następnie zawiera kolejną granicę, która jest biały . Z jakiegoś dziwnego powodu Gmail w Eksploratorze nie pokazuje w ogóle tej granicy, z wyjątkiem granicy u dołu dołu rejestracyjnego. Myślałem, że to ma coś wspólnego ze sposobem, w jaki zakodowałem granicę (wychodzę z kodu kogoś innego, wprowadziłem tylko kilka drobnych zmian), ponieważ granica została wykonana w następujący sposób:

border-left-style:solid;border-left-width:1px;border-left-color:#fff; 

Więc zmienił sposób, że granica zarówno szary i biały zostać zadeklarowana następująco:

border-left-style: 1px solid #fff; 

Ale to nie ma znaczenia w ogóle. To doprowadza mnie do szaleństwa, więc proszę o pomoc, jeśli możesz. Myślałem, że to może mieć coś wspólnego z szerokościami? Ale bawiąc się tym, po prostu zepsuł problem wszystkim innym klientom. Każda pomoc będzie bardzo cenna, ponieważ niedługo mogę rozbić głowę na ekran komputera.

Doceniam, że ten kod zawiera szalone style wbudowane, ale jest to oczywiście charakter wiadomości e-mail w formacie HTML.

AKTUALIZACJA: usunięcie białej ramki wewnętrznej elementów <td> powoduje wyświetlenie szarej ramki. Czy to ma coś wspólnego ze niewłaściwym ustawianiem szerokości?

AKTUALIZACJA 2: Jest to IE9, że jest to renderowane nieprawidłowo. I TYLKO dla Gmaila.

Answer 1

Twój problem polega na tym, że granica znajduje się na samym stole. Zwykle odkrywasz, że klienci poczty e-mail tego nie lubią. Sposób, że mam wokół niego było przez umieszczenie tabel w tabelach trochę tak:

<table width="600" cellpadding="0" cellspacing="0" border="0"> 
<tr> 
<td width="600" valign="top" align="center" bgcolor="#CCCCCC"> 
    <img src="spacer.gif" width="1px" height="1px" style="border:0px; display:block;"> 
    <table width="598" cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFFF"> 
    <tr> 
    <td width="598" align="left"> 
    Text Here 
    </td> 
    </tr> 
    </table> 
    <img src="spacer.gif" width="1px" height="1px" style="border:0px; display:block;"> 
</td> 
</tr> 
</table> 
    <br/><br/><br/> 
<table width="600" cellpadding="0" cellspacing="1" border="0" bgcolor="#CCCCCC"> 
<tr> 
<td width="600" valign="top" align="left" bgcolor="#FFFFFF"> 
    Text Here 
</td> 
</tr> 
</table> 

Oto kod na zasadzie: jsfiddle Stworzyłem 2 różne sposoby, aby uzyskać podobny efekt. Możesz wybrać ten, który najlepiej pasuje do ciebie.

Widzę również, że użyłeś maksymalnej szerokości, której niektórzy klienci poczty e-mail nie lubią, więc to może być twój problem. tutaj jest przewodnik monografii kampanii na css i czego powinieneś i czego nie powinieneś używać: http://www.campaignmonitor.com/css/

Answer 2

Używam poniższego na stole w moim e-mailu i nie mam problemów.

border-left: 2px #000000 solid;border-right: 2px #000000 solid;

Przetestowałem w wielu przeglądarkach & klientów poczty. Upewnij się, że Twoje style są w tekście, upewnij się, że nie ma różnej granicy na żadnym zewnętrznym stole, ponieważ Outlook itp. Dziedziczy po rodzicu. Problem z IE9 i Gmailem, który mi się wyróżniał, miałam w przypadku I-9 i Gmaila. było to, że renderował on responsywną wersję mojego e-maila, więc sprawdź zapytania dotyczące multimediów.Sposobem na rozwiązanie tego problemu jest dodanie CSS, więc jeśli masz <td width="600"> trzeba upewnić się, że staje się <td width="600" style="width:600px;">