Zurb墨水面板橫跨頁面

Question

我正在使用Zurb Ink製作html電子郵件。使用該面板，它在瀏覽器中看起來正確，寬度爲601px。但在Safari OS的展望（Mac書）上，面板一直貫穿整個電子郵件（如頁腳或頁眉）。

它應該是這樣的Safari的前景嗎？或者我的代碼有問題嗎？

  <table class="row"> 
       <tr> 
        <td class="panel" style="background: #ECF8FF; border-color: #b9e5ff"> 

         <table class="twelve columns container"> 
          {% for item in object_list %} 
          <tr> 
           <td class="four sub-columns"> 
            {% if not item.user_assigned %} 
            <table class="tiny-button small radius alert"> 
             <tr> 
              <td>unssigned</td> 
            {% else %} 
            <table class="tiny-button small radius success"> 
             <tr> 
              <td>assigned</td> 
            {% endif %} 
             </tr> 
            </table> 
           </td> 
           <td class="eight sub-columns last"> 
            {{ item.date_due }} - {{ item.action }} 
           </td> 
           <td class="expander"></td> 
          </tr> 
          {% endfor %} 
         </table> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

Answer 1

看起來那是因爲你缺少包裝和容器。

在docs它提到下列：

容器 - 約束內容到580（長）包裝在大屏幕上（95％在小屏幕上），並在主體內中心它。

包裝 - 包裝每個.columns表，以便在列之間創建一個裝訂線並強制它們在小屏幕上展開爲全寬。