我有一封基于 Zurb Ink 框架的电子邮件,似乎在所有浏览器的 Outlook.com 中都获得了额外的宽度。我已经将问题追溯到几组表格,但似乎无法弄清楚。代码(在通过 Zurb 内联发送之前)是(请注意,由于空间问题,我删除了 Ink 样式,但我没有更改它:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
<!-- Email Content -->
<table class="container">
<tr>
<td>
<table class="row">
<tr>
<td class="wrapper">
<table class="six columns">
<tr>
<td>
<img width="202" height="41" style="width:202px; height: 41px;" src="http://info.liquidspace.com/rs/liquidspace/images/lspacelogo.png" />
</td>
</tr>
</table>
</td>
<td class="wrapper offset-by-two last">
<table class="four columns">
<tr>
<td style="padding-top: 10px; text-align: right">
<span style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 9px; color: #00a3d8;">
View Online | Share with a Friend
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last">
<img width="600" style="width: 600px;" src="http://info.liquidspace.com/rs/liquidspace/images/announce_hero.png" />
</td>
</tr>
</table>
<table class="row" style="border-bottom: 1px solid #a7a9ab">
<tr>
<td class="wrapper">
<table class="five columns">
<tr>
<td class="two sub-columns">
</td>
<td class="ten sub-columns">
<table class="medium-button success">
<tr>
<td>
Download App
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="wrapper last">
<table class="seven columns">
<tr>
<td>
<span style="font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 20px; color: #a7a9ab">
Try the new LiquidSpace app for iPhone and <strong>get 30% off</strong> your next mobile booking. See details below.</span>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row" style="border-bottom: 1px solid #a7a9ab">
<tr>
<td class="wrapper offset-by-one">
<table class="five columns">
<tr>
<td style="padding: 50px 0 0 0;" class="hide-for-small">
<img height="350" style="height: 350px;" src="http://info.liquidspace.com/rs/liquidspace/images/announce_img_1.png" />
</td>
</tr>
</table>
</td>
<td class="wrapper last">
<table class="six columns">
<tr>
<td class="center" style="padding-top: 200px;">
<span style="font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 25px; color: #ff5c26">Book on the go<br /><br /></span>
<span style="font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; color: #808284">Choose from 1000s of workspaces and book them in real time.</span>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row" style="border-bottom: 1px solid #a7a9ab">
<tr>
<td class="wrapper">
<table class="six columns">
<tr>
<td class="center" style="padding-top: 200px;">
<span style="font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 25px; color: #ff5c26">Get right to work<br /><br /></span>
<span style="font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; color: #808284">Receive timely notifications like parking tips and Wi-Fi passwords.</span>
</td>
</tr>
</table>
</td>
<td class="wrapper last offset-by-one">
<table class="five columns">
<tr>
<td style="padding: 50px 0 0 0;" class="hide-for-small">
<img height="350" style="height: 350px;" src="http://info.liquidspace.com/rs/liquidspace/images/announce_img_2.png" />
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row" style="border-bottom: 1px solid #a7a9ab">
<tr>
<td class="wrapper offset-by-one">
<table class="five columns">
<tr>
<td style="padding: 50px 0 0 0;" class="hide-for-small">
<img height="350" style="height: 350px;" src="http://info.liquidspace.com/rs/liquidspace/images/announce_img_3.png" />
</td>
</tr>
</table>
</td>
<td class="wrapper last">
<table class="six columns">
<tr>
<td class="center" style="padding-top: 200px;">
<span style="font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 25px; color: #ff5c26">Stay in touch<br /><br /></span>
<span style="font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; color: #808284">Invite meeting guests and know if they are running late.</span>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row" style="background: #a7a9ab">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td class="center">
<span style="font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 29px; color: #ffffff">
<br />Go mobile and get 30% off.
</span><br />
<span style="font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 200; color: #ffffff">
Book with the new iPhone app or current Android app.<br />
(We love Android too and our update is coming soon)<br />
Use Promo Code GOMOBILE at checkout. See details below.
</span>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row" style="background: #a7a9ab">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td class="center">
<table class="seven columns">
<tr>
<td>
<img width="144" height="41" style="width: 144px; height: 41px;" class="center" src="http://info.liquidspace.com/rs/liquidspace/images/appleappstore.png" />
</td>
<td>
<img width="144" height="41" style="width 144px; height: 41px;" src="http://info.liquidspace.com/rs/liquidspace/images/googleplay.png" />
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td>
<table>
<tr>
<td>
<p style="font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 9px; color: #929497">
This offer is void where prohibited by law. Discount applies only to bookings at venues where the member’s valid credit
card payment is processed by LiquidSpace and does not apply to bookings at venues where the member is billed directly by
the venue. Offer may only be redeemed one time per customer and must be used before April 30, 2015. Customer must use
promotional code GOMOBILE at the time of booking in order to receive the discount. Booking must be made through the
LiquidSpace mobile app on either an Apple iPhone or Android device. Offer cannot be combined with any other offer,
sale or promotion. The offer cannot be redeemed for cash value and is not transferable. LiquidSpace reserves the
right to terminate this offer at any time.<br /><br />
Apple, the Apple logo, and iPhone are trademarks of Apple Inc., registered in the U.S. and other countries. App Store
is a service mark of Apple Inc.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>