0
所以我試圖建立我的第一個響應電子郵件和一切都很不錯，除了我的兩個導航領域。第一個，我有四個按鈕，我想重新排列從運行到兩個堆棧中的兩個。它的工作在我的初步測試，但後來當我把它通過我的電子郵件提供商，它們被認爲可以躺在下面正確呈現前兩個TDS（均爲50％），但兩者都壓扁了一邊。同爲第二導航我要怎樣做（除了，我想這三個切換到100％，在彼此的頂部）不是在響應電子郵件妥善堆放
關於如何解決此問題的任何建議，將不勝感激！這裏是我的代碼（這是工作在這裏很好，但打破了所有的移動時，我居然把它發送出去）：
/* Stacked Top Links Navigation Pattern CSS */
@media only screen and (max-width: 400px) {
td[class="main_nav"] {
padding: 0;
}
td[class="main_nav"] td {
display: inline-block;
/*float: left;*/
padding: 0 !important;
width: 50%;
}
td[class="main_nav"] a {
display: block;
padding: 10px 0;
background: #565656;
}
td[class="main_nav"] .nav1 a,
td[class="main_nav"] .nav2 a {
border-bottom: 1px solid #777;
}
td[class="main_nav"] .nav1 a,
td[class="main_nav"] .nav3 a {
border-right: 1px solid #777;
}
}
/* Stacked Top Links Navigation Pattern CSS */
@media only screen and (max-width: 400px) {
td[class="secondary_nav"] {
padding: 0;
}
td[class="secondary_nav"] td {
display: inline-block;
/*float: left;*/
padding: 0 !important;
width: 100%;
}
td[class="secondary_nav"] a {
display: block;
padding: 10px 0;
background: #005c5b;
text-align: center;
}
td[class="secondary_nav"] .nav1 a,
td[class="secondary_nav"] .nav2 a {
border-bottom: 1px solid #fff;
}
}<!-- BEGINNING OF NAVIGATION -->
<table cellpadding="0" cellspacing="0" bgcolor="#565656">
<tr>
<td class="main_nav" width="600" bgcolor="#565656">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#565656" style="width:100%!important">
<tr>
<td class="nav1" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 1</a>
</td>
<td class="nav2" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 2</a>
</td>
<td class="nav3" align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 3</a>
</td>
<td align="center" style="padding: 10px 10px; font-family: arial,sans-serif; font-size: 11px;">
<a href="#" style="text-decoration: none; color: #ffffff;">Nav 4</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br/>
<!-- END OF NAVIGATION -->
<!-- BEGINNING OF SECONDARY STORY NAVIGATION -->
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td class="secondary_nav" width="600">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#005c5b">
<tr>
<td class="nav1" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; text-align:left;border-right:solid 1px #ffffff;">
<a href="bottom-section" style="font-family:arial; font-weight:bold; font-size:14px;color:#ffffff; text-decoration:none;">Secondary nav 1</a>
</td>
<td class="nav2" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; font-family: arial,sans-serif; font-size: 11px; text-align:left;border-right:solid 1px #ffffff;">
<a href="bottom-section" style="font-family:arial; font-weight:bold; font-size:14px;text-decoration: none; color: #ffffff;">Secondary nav 2</a>
</td>
<td class="nav3" width="33.33%" align="center" style="padding: 20px 10px 20px 30px; font-family: arial,sans-serif; font-size: 11px; text-align:left;">
<a href="bottom-section" style="font-family:arial; font-weight:bold; font-size:14px;text-decoration: none; color: #ffffff;">Secondary nav 3</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END OF SECONDARY STORY NAVIGATION -->
謝謝!!它在所有iPhone上看起來非常完美！在Andriod手機和Outlook 2007-16（但在2003年和2011年罰款）看起來真的很不順。你有什麼建議嗎？我不知道是否有方法可以向我展示屏幕截圖？ – kmcf89
在Android中，該表是不會充分寬度 - 所以文本不對齊的地方是應該的，因爲有一個背景色是非常明顯的。 （對我來說一般問題，在電子郵件中的任何地方都會發生，而不僅僅是在導航中）另外，不確定媒體查詢是否工作，因爲導航表並不像他們應該那樣在彼此之下包裝。在Outlook中，它就像表格一樣......不知道尺寸是多少，它們都是不同的，文本被擠壓。 – kmcf89
通過使用表格和「鬼」表周圍，使表坐這麼近，你不能得到寬度權利，而不設置寬度或最大寬度上的父表。如果你能做到這一點，將這個寬度除以4，並在每個「鬼」表上設置該寬度。 –