0
我試圖設計一個電子郵件模板，如果可能的話，它也針對iPhone和更高版本進行了優化。 我已經創建了一個不同的標頭，頭部有類「mobileheader」，導航菜單中有類「mobilenav」，它在iPhone中可以正常工作。問題在於它應該隱藏在電子郵件客戶端中，這意味着它們將顯示桌面版本。這適用於Safari，Firefox和Chrome以及Outlook 2010中的Outlook.com，Gmail和Yahoo，但在IE9，Outlook.com顯示移動版本的菜單，這可以修復刷新頁面，但顯然這是遠遠不理想。 我已經檢查了代碼運行幾個測試，但我不知道問題可能在哪裏，所以任何幫助將是偉大的。在Hotmail（Outlook）中使用媒體查詢進行電子郵件設計時遇到困難
這對於剛好在包裝物（100％）表之後位於CSS的代碼：
<style type="text/css">
a{text-decoration:none;}
.ExternalClass * {line-height: 100%}
.ExternalClass {width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
body {margin:0; padding:0;-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
table td {border-collapse: collapse;}
p {margin:0; padding:0; margin-bottom:0;line-height:100%;}
.no-mobile{display:table;}
.contenttable1{width:600px;}
.contenttable{width:600px;}
.mobilenav{display:none !important;}
.mobileheader{display:none;}
.mobilelogo img{width:1px;height;1px;}
.web-version{font-size:1px;color:#FFFFFF;}
@media only screen and (max-width: 600px) {
table[class="no-mobile"]{
display:none !important;
}
table[class="contenttable1"]{
width:320px !important;
}
table[class="contenttable"]{
width:320px !important;
}
table[class="centeredtable"]{
text-align:center;
}
table[class="mobilenav"]{
display:block !important;
}
table[class="mobilenav"] td img{
width:600px !important;
}
table[class="mobileheader"]{
display:block !important;
}
table[class="logo"]{
width:320px !important;
}
table[class="header"]{
width:320px !important;
}
td[class="mobilelogo"]{
height:60px;
}
td[class="mobilelogo"] img{
text-align:left;
width:200px;
height:60px;
}
td[class="mobiletext"]{
height:60px;
}
td[class="innerspacer15"] img{
text-align:center;
}
span.[class="web-version"],font.[class="web-version"]{
font-size:13px;
color:#FFFFFF;
}
span[class="web-version"]{
text-align:right !important;
color:#000000 !important;
font-size:13px !important;
font-family:'Arial',Verdana,Sans-Serif !important;
font-weight:normal !important;
}
font[class="orangelink"]{
text-align:right !important;
color:#FF5800;
font-size:13px;
font-family:'Arial',Verdana,Sans-Serif;
font-weight:normal;
}
}
這用於報頭和導航的代碼：
<tr>
<td colspan="2" width="600">
<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" class="no-mobile">
<tr>
<td width="157"><a href="~" target="_blank"><img src="image.gif" alt="Logo" width="157" height="54" border="0" style="display: block" /></a></td>
<td align="right" style="text-align:right;line-height:0"><span style="font-family:'Arial',Verdana,Sans-Serif;color:#000000;font-size:13px">Problems seeing this email? <a href="#" target="_blank" style="font-family:'Arial',Verdana,Sans-Serif;color:#FF5800">Click here</a></span></td>
<td width="10" style="line-height:0" bgcolor="#FFFFFF"> </td>
</tr>
</table>
<table width="600" cellspacing="0" cellpadding="0" border="0" align="right" style="display:none;text-align:center" class="mobileheader" bgcolor="#FFFFFF">
<tr>
<td width="200" height="1" style="text-align:left;line-height:0" align="center" class="mobilelogo" ><a href="#" target="_blank"><img src="image" alt="Logo" width="0" height="1" border="0" style="text-align:center" /></a></td>
<td width="399" height="1" style="text-align:right;line-height:0" align="right" class="mobiletext"><span style="font-family:'Arial',Verdana,Sans-Serif;color:#FFFFFF;font-size:1px" class="web-version">Problems seeing this email?</span> <span style="font-family:'Arial',Verdana,Sans-Serif;color:#FFFFFF;font-size:1px"><a href="#" target="_blank" style="text-decoration:none;color:#FFFFFF" class="web-version"><font color="#FFFFFF" class="orangelink">Click here</font></a></span></td>
</tr>
</table>
</td>
</tr>
移動導航具有類「mobilenav」和內聯樣式「display：none」。我曾嘗試使用display none！以前的內聯風格，但它沒有在iPhone中顯示導航，所以我不得不改變它。
任何幫助將是偉大的。 謝謝你的時間。