HTML Outlook 2013電子郵件超過面板寬度的100％寬度width =“ 100％”設置
[英]HTML Outlook 2013 email exceeding 100% width of panel width width=“100%” set
問題描述
我正在嘗試為Outlook 2013創建響應HTML電子郵件，但是嘗試使電子郵件遵守我設置的寬度限制（即width =“ 100％”）時遇到了麻煩。 實際上，實際寬度已設置為100％，直到我達到某個較小的寬度為止，此時必須滾動查看信息。
該代碼在IE中工作正常（毫不奇怪），因此我知道代碼本身至少在某種意義上是適當的（即，我沒有包裝不正確的東西）。
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Responsive Email Template</title>
<style type="text/css">
.ReadMsgBody {
width: 100%;
background-color: #ffffff;
}
.ExternalClass {
width: 100%;
background-color: #ffffff;
}
body {
width: 100%;
background-color: #ffffff;
margin:0;
padding:0;
-webkit-font-smoothing: antialiased;
font-family: Georgia, Times, serif
}
table {
border-collapse: collapse;
}
a {
color:#0076b7;
}
.nav-link:visited {
color:#fff;
}
/*
@media only screen and (max-width: 640px) {
.deviceWidth {width:440px!important; padding:0;}
.ReadMsgBody {width:440px!important; padding:0;}
.center {text-align: center!important;}
}
@media only screen and (max-width: 479px) {
.deviceWidth {width:280px!important; padding:0;}
.ReadMsgBody {width:280px!important; padding:0;}
.center {text-align: left!important;}
} */
</style>
</head>
<body style="font-family: Georgia, Times, serif">
<!-- Wrapper -->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#fff" style="padding-top:20px" valign="top" width="100%">
<!-- Start Header-->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" style="font-size:21px; font-weight:bold; margin:0 auto; font-family:'Franklin Gothic',sans-serif;" width="100%">
<tr>
<td bgcolor="#0076B7" width="100%">
<!-- Logo -->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td class="center" style="line-height:32px; padding:5px 20px;">
<a class="nav-link" style="font-size:21px; font-weight:bold; color:#fff; text-decoration: none; font-family:'Franklin Gothic',sans-serif;" href="#">LOGO</a>
</td>
</tr>
</table><!-- End Logo -->
<!-- Nav -->
<table align="right" border="0" cellpadding="0" cellspacing="0" class="deviceWidth">
<tr>
<td class="center" style="font-size: 13px; color: #fff; font-weight: light; text-align: right; font-family:'Franklin Gothic Book',sans-serif; line-height: 24px; vertical-align: middle; padding:10px 20px; font-style:normal">
<a href="#" style="text-decoration: none; color: #fff;">Home</a> | <a href="#" style="text-decoration: none; color: #fff;">News</a> | <a href="#" style="text-decoration: none; color: #fff;">Events</a> | <a href="#" style="text-decoration: none; color: #fff;">Applications</a> | <a href="#" style="text-decoration: none; color: #fff;">OrgChart</a>
</td>
</tr>
</table><!-- End Nav -->
</td>
</tr>
</table><!-- End Header -->
<!-- Actual Email Section -->
<table align="center" bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" style="margin:0 auto;" width="100%">
<tr>
<td bgcolor="#fff" style="font-size: 16px; color: #292215; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
<table>
<tr>
<td style="padding:10px 10px 10px 0" valign="middle">
<a href="#" style="text-decoration: none; color: #004467; font-size: 32px; font-weight: normal; font-family:'Franklin Gothic', sans-serif">Title</a>
</td>
</tr>
</table>
<!-- Content -->
<p>Content here.</p>
</td>
</tr>
<!-- Footer -->
<tr>
<td bgcolor="#fff" style="font-size: 16px; color: #292215; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; vertical-align: top; padding:40px 8px 10px 8px">
<a href="#" style="font-size:18px; text-decoration: none;font-family: 'Franklin Gothic', sans-serif;">Place of Work</a><br>
Jacob Johnson<br>
Work Role<br>
<a href="mailto:me@me.com">jacobjohnson@me.com</a><br>
555-555-5555
</td>
</tr>
</table><!-- End One Column -->
</td>
</tr>
</table><!-- End Wrapper -->
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff;">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>
</body>
</html>
回顧：我的電子郵件超出了我設置的寬度限制，我不知道為什么。 前景讓我很痛苦。
2 個解決方案
解決方案1
0 2017-06-13 17:07:31
Outlook並未損壞，您的代碼在幾乎每個電子郵件客戶端中都表現出相同的行為。
問題是您將所有表的寬度設置為100％。 在其中許多文件上，您添加了.deviceWidth類，您可以在其中指定媒體查詢的寬度，但不能指定大於640px的寬度。 Outlook不支持@media查詢。
嘗試添加.deviceWidth {width:440px!important; padding:0;} .deviceWidth {width:440px!important; padding:0;}移至媒體查詢之外的樣式表，並在每個表上指定width="100%" 。
JSFiddle目前無法為我工作，因此無法向您展示示例。
祝好運。
解決方案2
0 2017-06-19 10:18:48
Outlook不尊重100％的寬度，因此您需要為Outlook設置一個固定的寬度，將寬度添加到包裝器表中
<table class="for_others" align="center" border="0"
cellpadding="0" cellspacing="0" width="600">
並使用該類將所有其他寬度設置為100％。 在聲明的末尾使用！important覆蓋內聯css。
table.for_others {width: 100% !important;}
容器超過寬度 100%
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.