首先，我知道這已經問了很多像這兩個：大廈HTML電子郵件....而且我可以把一...標記....但我沒有找到一個明確有效的答案！或者我聽不懂！！
我已經簽終極指南CSS和它說，用<style></style>在標簽<head></head>是Gmail和雅虎以及確定@media。但是我的模板在 gmail 或 yahoo 中沒有任何樣式。我想發送回應式電子郵件，所以我@media還需要有什么方法可以:nth()在電子郵件中使用？
我把代碼片段放在下面，如果有人幫助我，我真的很感激！我使用putsmail在 gmail 和 yahoo 郵件上對其進行了測驗。
顯示代碼片段
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Order</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
/**
* Avoid browser level font resizing.
* 1. Windows Mobile
* 2. iOS / OSX
*/
body,
table,
td,
a {
-ms-text-size-adjust: 100%; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove extra space added to tables and cells in Outlook.
*/
table,
td {
mso-table-rspace: 0pt;
mso-table-lspace: 0pt;
}
/**
* Better fluid images in Internet Explorer.
*/
img {
-ms-interpolation-mode: bicubic;
}
/**
* Remove blue links for iOS devices.
*/
a[x-apple-data-detectors] {
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
color: inherit !important;
text-decoration: none !important;
}
/**
* Fix centering issues in Android 4.4.
*/
div[style*="margin: 16px 0;"] {
margin: 0 !important;
}
body {
max-width: 1100px !important;
height: 100% !important;
margin: 0 auto !important;
font-family: Tahoma;
background-color: #f7f7f7;
padding: 20px;
}
.rtl{
direction: rtl;
}
.ltr{
direction: ltr;
}
/**
* Collapse table borders to avoid space between cells.
*/
/* table {
border-collapse: collapse !important;
} */
a {
color: #1a82e2;
}
img {
height: auto;
line-height: 100%;
text-decoration: none;
border: 0;
outline: none;
}
p{
margin: 0px;
}
.main-padding{
padding: 20px;
}
.main_table{
background-color: #fff;
border: 1px solid #dddddd;
}
.header_section{
width: 100%;
color: #1a1b41;
border-bottom: 3px solid #ffc107;
font-size: 12px;
}
.title_section{
width: 100%;
color: #1a1b41;
border: 3px solid #1a1b41;
font-size: 15px;
text-align: center;
padding: 12px;
text-transform: uppercase;
letter-spacing: 1px;
}
.status_section{
width: 100%;
color: #fff;
border-radius: 4px;
padding: 10px;
}
.status_section--success{
background-color: #28a745;
}
.status_section--fail{
background-color: #dc3545;
}
.status_section .icon_wrapper{
width: 62px;
height: 62px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.16);
}
.status_section .icon{
width: 26px;
margin: 18px;
}
.items_section_wrapper{
width: 60%;
padding: 10px 20px;
vertical-align: top;
}
.items_section{
width: 100%;
margin-bottom: 20px;
}
.items_section .avatar{
width: 40px;
height: 40px;
border-radius: 50%;
}
.items_section .info{
padding: 0px 8px;
}
.items_section .info .title{
margin-bottom: 2px;
text-align: start;
font-size: 14px;
color: #1a1b41;
font-weight: 700;
}
.items_section .info .location{
text-align: start;
font-size: 12px;
color: #505050;
}
.items_section .card{
background-color: #e4e4e4;
padding: 4px;
border-radius: 4px;
}
.items_section .card .image{
vertical-align: top;
width: 20%;
}
.items_section .card img{
display: block !important;
width: 100% !important;
height: auto !important;
border-radius: 15px;
box-shadow: 0px 2px 5px #a5a5a5;
}
.items_section .card .info_wrapper{
vertical-align: top;
}
.items_section .card .title{
font-size: 14px;
color: #000;
padding: 8px;
}
.items_section .card .price{
padding: 8px;
font-size: 18px;
color: #000;
}
.items_section .card .price{
padding: 8px;
font-size: 18px;
color: #000;
}
.items_section .card .price-total{
padding: 8px 0;
font-size: 18px;
color: #000;
font-weight: 800;
text-align: end;
}
.items_section .card .sign{
padding: 0 4px;
font-size: 16px;
color: #505050;
font-weight: 800;
}
.items_section .card .number{
font-size: 18px;
color: #000;
font-weight: 800;
}
.items_section .card .attr{
padding: 0px 8px;
}
.items_section .card .dot{
color: #ff3366;
font-size: 16px;
}
.rtl .items_section .card .value{
color: #1a1b41;
font-size: 12px;
margin-bottom: 4px;
width: 50%;
font-weight: 800;
float: right;
}
.ltr .items_section .card .value{
color: #1a1b41;
font-size: 12px;
margin-bottom: 4px;
width: 50%;
font-weight: 800;
float: left;
}
.items_section .shipping_wrapper{
width: 100%;
font-size: 12px;
font-weight: 700;
}
.items_section .shipping_wrapper .icon{
width: 20px;
}
.details_wrapper{
width: 100%;
}
.total_recipient_table-side{
padding: 10px 20px;
vertical-align: top;
}
.total_recipient_table-bottom{
display: none;
}
.detail_table{
width: 100%;
box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
border-radius: 4px;
border-spacing: 0;
}
.detail_table .header{
font-size: 16px;
font-weight: 700;
text-align: start;
padding: 8px;
box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
}
.detail_table .rows:nth-child(even){
background-color: #eee;
}
.detail_table .rows .title{
font-size: 12px;
font-weight: 700;
padding: 8px;
text-align: start;
min-width: 100px;
}
.detail_table .rows .text{
font-size: 12px;
font-weight: 700;
padding: 8px;
text-align: end;
}
.btns_section{
width: 100%;
}
.btns_section .btn_wrapper{
display: flex;
flex-wrap: wrap;
}
.btns_section button{
font-size: 13px;
padding: 8px;
min-width: 100px;
color: #fff;
text-transform: uppercase;
border: none;
margin: 4px;
}
.btns_section button:hover{
cursor: pointer;
}
.btns_section button:focus{
outline: none;
}
.btn_s{
background-color: #28a745;
}
.btn_d{
background-color: #dc3545;
}
.btn_w{
background-color: #ffc107;
}
.btn_i{
background-color: #17a2b8;
}
.action_section button{
background-color: #ffc107;
font-size: 15px;
padding: 10px;
min-width: 150px;
color: #fff;
text-transform: uppercase;
border: none;
}
.action_section button:hover{
background-color: #ffc107ee;
cursor: pointer;
}
.action_section button:focus{
background-color: #ffc107ee;
outline: none;
}
.footer_section{
width: 100%;
border-top: 3px solid #757575;
}
.footer_section td{
font-size: 10px;
text-align: center;
color: #1a1b41;
}
.footer_section a{
text-decoration: none;
color: #1a1b41;
}
.footer_section a:hover{
color: #ffc107;
}
.mobile{
display: none;
}
@media (max-device-width: 767px),
(max-width: 767px) {
body{
padding: 5px;
}
.main-padding{
padding: 10px 5px;
}
.items_section_wrapper{
width: 100%;
padding: 10px 5px;
}
.items_section .card .image{
width: 25%;
}
.items_section .card img{
border-radius: 4px;
}
.items_section .card .attr{
padding: 8px 0 0;
}
.items_section .card .price{
padding: 8px 0 0;
font-size: 16px;
}
.ltr .items_section .card .price{
float: left;
}
.rtl .items_section .card .price{
float: right;
}
.items_section .card .price-total{
padding: 8px 0 0;
font-size: 16px;
}
.items_section .card .sign{
padding: 0 4px;
font-size: 14px;
}
.items_section .card .number{
font-size: 16px;
}
.total_recipient_table-side{
display: none;
}
.total_recipient_table-bottom{
display: table-row;
}
.desktop{
display: none;
}
.mobile{
display: table;
}
}
</style>
</head>
<!-- ltr / rlt -->
<body class="ltr">
<!-- start preheader -->
<div class="preheader" style="display: none; max-width: 0; max-height: 0; overflow: hidden; font-size: 1px; line-height: 1px; color: #fff; opacity: 0;">
<!-- A preheader is the short summary text that follows the subject line when an email is viewed in the inbox. -->
Your Order submitted
</div>
<!-- end preheader -->
<!-- start body -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="main_table">
<tr>
<td align="center" class="main-padding">
<table class="header_section">
<tr>
<td>
Example.com
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" class="main-padding">
<table class="title_section">
<tr>
<td>
Your <span style="color: #ffc107;">Order</span>
</td>
</tr>
<tr>
<td>
Thanks for choosing us!
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" class="main-padding">
<!-- for failed change status_section--success to status_section--fail ALSO img src to times-circle-solid.png -->
<table class="status_section status_section--success">
<tr>
<td style="width:70px;">
<div class="icon_wrapper">
<img class="icon" src="check-circle-solid.png">
</div>
</td>
<td style="font-weight: 700;font-size: 14px;">
payment was successful<span> - your invoice code: </span><span>1235789</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="width: 100%;">
<tr>
<td class="items_section_wrapper">
<table class="items_section">
<tr class="vendor">
<td style="width: 40px;">
<img src="1.jpg" class="avatar">
</td>
<td class="info">
<p class="title">Vendor Name</p>
<p class="location">location</p>
</td>
</tr>
<tr>
<td colspan="2" class="card">
<table style="width: 100%; border-spacing: 0;">
<tr>
<td class="image">
<img src="1.jpg">
</td>
<td class="info_wrapper">
<table style="width: 100%;">
<tr>
<td class="title" colspan="2">Lorem Ipsum</td>
</tr>
<tr class="desktop">
<td colspan="2" class="attr">
<p class="value"><span class="dot">• </span>color: red</p>
</td>
</tr>
<tr class="desktop">
<td class="price">12 $<span class="sign">×</span><span class="number">10</span></td>
<td class="price-total">120 $</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table style="width: 100%;" class="mobile">
<tr>
<td class="attr" colspan="1">
<p class="value"><span class="dot">• </span>color: red</p>
</td>
</tr>
<tr>
<td>
<p class="price">12 $<span class="sign">×</span><span class="number">10</span></p>
<p class="price-total">120 $</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<table class="shipping_wrapper">
<tr>
<td style="width: 24px;">
<img src="truck-solid.png" class="icon">
</td>
<td>shipping</td>
<td style="text-align: end;">20 $</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="total_recipient_table-side">
<table class="details_wrapper">
<tr>
<td style="padding-bottom:24px;">
<table class="detail_table">
<tr>
<td class="header" colspan="2">calc</td>
</tr>
<tr class="rows">
<td class="title">Items</td>
<td class="text">120 $</td>
</tr>
<tr class="rows">
<td class="title">Tax Fee</td>
<td class="text">10 $</td>
</tr>
<tr class="rows">
<td class="title">Shipping</td>
<td class="text">20 $</td>
</tr>
<tr class="rows">
<td class="title">Total</td>
<td class="text">150 $</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="detail_table">
<tr>
<td class="header" colspan="2">recipient</td>
</tr>
<tr class="rows">
<td class="title">full name</td>
<td class="text">John Doe</td>
</tr>
<tr class="rows">
<td class="title">email</td>
<td class="text">[email protected]</td>
</tr>
<tr class="rows">
<td class="title">phone</td>
<td class="text">00000000000</td>
</tr>
<tr class="rows">
<td class="title">address</td>
<td class="text">.............</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr class="total_recipient_table-bottom">
<td class="main-padding">
<table class="details_wrapper">
<tr>
<td style="padding-bottom:24px;">
<table class="detail_table">
<tr>
<td class="header" colspan="2">calc</td>
</tr>
<tr class="rows">
<td class="title">Items</td>
<td class="text">120 $</td>
</tr>
<tr class="rows">
<td class="title">Tax Fee</td>
<td class="text">10 $</td>
</tr>
<tr class="rows">
<td class="title">Shipping</td>
<td class="text">20 $</td>
</tr>
<tr class="rows">
<td class="title">Total</td>
<td class="text">150 $</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="detail_table">
<tr>
<td class="header" colspan="2">recipient</td>
</tr>
<tr class="rows">
<td class="title">full name</td>
<td class="text">John Doe</td>
</tr>
<tr class="rows">
<td class="title">email</td>
<td class="text">[email protected]</td>
</tr>
<tr class="rows">
<td class="title">phone</td>
<td class="text">00000000000</td>
</tr>
<tr class="rows">
<td class="title">address</td>
<td class="text">.............</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" class="main-padding">
<table class="btns_section">
<tr>
<td class="btn_wrapper">
<a href="#"><button class="btn_s">Accept</button></a>
<a href="#"><button class="btn_d">Delete</button></a>
<a href="#"><button class="btn_w">Reject</button></a>
<a href="#"><button class="btn_i">Pend</button></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" class="main-padding" style="padding-top: 40px;padding-bottom: 40px;">
<table class="action_section">
<tr>
<td>
<a href="#"><button>Button</button></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" class="main-padding">
<table class="footer_section">
<tr>
<td>
Copyright © 2020 example.com All rights reserved | <span><a href="#">Home</a></span> | <span><a href="#">Contact Us</a></span> |
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end body -->
</body>
</html>uj5u.com熱心網友回復：
您在這里遇到了兩種不同的電子郵件錯誤，一種在 Gmail 中，另一種在 Yahoo 中。這是發生了什么以及如何解決它。
1. Gmail
Gmail 對某些樣式非常挑剔。每當 Gmail 看到它不喜歡的內容時，Gmail 都會洗掉<style>包含有問題樣式的整個標簽。您可以在此處閱讀有關 Gmail 如何洗掉包含特殊字符的樣式的更多資訊。為了找出您的代碼出了什么問題，我將您的一個且僅<style>標記為多個。然后我給自己發送了電子郵件并檢查了 Gmail 中的代碼，并查看了 Gmail 保留的內容。然后我能夠得出結論，Gmail 不喜歡你的代碼是語法box-shadow宣告/。
.detail_table{
width: 100%;
box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
border-radius: 4px;
border-spacing: 0;
}
.detail_table .header{
font-size: 16px;
font-weight: 700;
text-align: start;
padding: 8px;
box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
}
這里的解決方案只是將有問題的樣式隔離在它們自己的<style>標簽中。因此，box-shadow從您的巨型<style>標簽中洗掉這兩個宣告，并添加<style>僅包含以下內容的第二個標簽：
.detail_table{
box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
}
.detail_table .header{
box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
}
2. 雅虎
我假設您正在 Yahoo Android 上進行測驗。在 Android 上，雅虎會從<head>標簽中洗掉內容。（您可以在此處閱讀有關此內容的更多資訊。）但它僅針對<head>電子郵件中的第一個標簽執行此操作。我知道你在想什么，HTML 通常只有一個<head>元素。但事實證明我們可以添加第二個<head>標簽，雅虎會將內容保留在第二個<head>. 因此，要使回應式電子郵件在 Android 上的 Yahoo 中運行，通常的做法是首先添加一個空<head>標簽，然后添加一個<head>包含所有內容的真實標簽。令人驚訝的是，這在電子郵件客戶端和渲染引擎中得到了很好的支持。下面是一個例子：
!DOCTYPE html>
<html>
<head></head>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Order</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
/**
* Avoid browser level font resizing.
* 1. Windows Mobile
* 2. iOS / OSX
*/
body,
table,
td,
a {
…
}
</style>
</head>
<body>
…
</body>
</html>
另請注意，雅虎在CSS 注釋方面存在錯誤，在發送電子郵件之前洗掉所有 CSS 注釋通常是一個好習慣。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/401220.html
標籤：html css 电子邮件 html-email
上一篇：輸入元素不在一行/一行中
下一篇：僅選擇元素或導航選單中的文本