如何解决无法更改电子邮件模板 D365 crm 中的最小高度
我在营销 D365 crm 中更改电子邮件模板中的最小高度时遇到问题。 我已经尝试通过 UI 更改最小高度大小(见图片)和 html,但大小再次恢复到原来的状态。我也尝试从 css 中删除 !important 以防万一这会有所帮助,但没有。
这不是 1 列的问题,而是多列部分的问题。
有人有什么想法吗?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>My Email Subject</title>
<Meta name="referrer" content="never">
<Meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document">
<Meta type="xrm/designer/setting" name="layout-editable" value="marketing-designer-layout-editable">
<Meta type="xrm/designer/setting" name="layout-max-width" value="600px" datatype="text" label="Layout max width">
<Meta type="xrm/designer/setting" name="font-family" value="Verdana,Arial,sans-serif" datatype="font" label="Font Family">
<Meta type="xrm/designer/setting" name="body-text-size" value="14px" datatype="text" label="Body Font Size">
<Meta type="xrm/designer/setting" name="body-text-color" value="#000" datatype="color" label="Body Text Color">
<Meta type="xrm/designer/setting" name="outer-background" value="#FFFFF" datatype="color" label="Email Background">
<style>
body,div {
font-family: /* @font-family */
Verdana,/* @font-family */
Arial,/* @font-family */
sans-serif/* @font-family */
;
font-size: /* @body-text-size */
14px/* @body-text-size */
;
color: /* @body-text-color */
#000/* @body-text-color */
;
background-color: /* @outer-background */
#fff/* @outer-background */
;
}
div div {
background-color: transparent;
}
[data-layout="true"] {
margin: 0 auto;
max-width: /* @layout-max-width */
600px/* @layout-max-width */
;
}
p {
margin: 0px;
padding: 0px;
line-height: 20px;
mso-line-height-rule: at-least;
}
ul,ol {
margin-top: 15px;
margin-bottom: 15px;
line-height: 20px;
mso-line-height-rule: at-least;
}
p img {
max-width: 100%;
}
a {
text-decoration: none;
}
u a {
text-decoration: underline;
}
h2,h3,h4 {
margin: 0px;
}
.imageWrapper a img {
text-decoration: none;
border: 0px;
}
body[data-outlook-cycle] .tbContainer {
display: block !important;
}
body[data-outlook-cycle] .tbContainer.multi table {
table-layout: fixed;
height: auto !important;
}
body[data-outlook-cycle] .tbContainer.multi td {
width: auto !important;
min-height:70px !important;
}
body[data-outlook-cycle] .tbContainer.multi tr td {
display: block;
}
body[data-outlook-cycle] .tbContainer.multi .inner {
height: auto !important;
min-height: auto !important;
}
body[data-outlook-cycle] .tbContainer .inner {
Box-sizing: border-Box
}
body[data-outlook-cycle] .outer {
width: auto !important;
}
body[data-outlook-cycle] .innerTable {
min-height: auto !important;
}
@media only screen and (max-width: 768px) {
.columnContainerWrapper {
min-height: 70px !important;
}
a span {
line-height: inherit !important;
}
}
@media only screen and (max-width: 768px) {
.tbContainer {display: block !important;}
.tbContainer.multi table {
table-layout: fixed;
height:auto !important;
}
.tbContainer.multi td {
width: auto !important;
min-height:70px !important;
}
.tbContainer.multi tr,.tbContainer.multi tr td {display: block}
.tbContainer.multi .inner {
height: auto !important;
}
.tbContainer .inner {Box-sizing: border-Box}
.outer {
width: auto !important;
}
.innerTable {
min-height: auto !important;
}
}
</style>
<Meta name="html-editor"></head>
<body><div data-layout="true">
<div data-section="true" class=""><table class="outer" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse;width: 600px;display: block;">
<tbody>
<tr>
<td style="vertical-align: top; padding: 10px; background-color: rgb(253,222,207);">
<table style="
display: block;
width: 100%;
border-collapse: collapse;
" class="containerWrapper tbContainer multi" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td data-container="true" class="columnContainer" data-container-width="50" style="
min-height: 70px;
min-width: 15px;width: 290.00px;
;" id="container4cab7d4be62be1622552139868">
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; min-height: 90px;" class="innerTable">
<tbody>
<tr>
<td class="columnContainer inner ui-sortable" style="height: 70px; min-width: 15px; padding: 10px; vertical-align: top; word-wrap: break-word; word-break: break-word; background-color: rgb(204,208,255);"></td>
</tr>
</tbody>
</table>
</td>
<td data-container="true" class="columnContainer" data-container-width="50" style="
min-height: 0px;
min-width: 15px;width: 290.00px;
;" id="container0d27b048b79d51622552139868">
<table width="100%" cellpadding="0" cellspacing="0" class="innerTable" style="min-height: 90px;">
<tbody>
<tr>
<td class="columnContainer inner ui-sortable" style="height: 70px; min-width: 15px; padding: 10px; vertical-align: top; word-wrap: break-word; word-break: break-word; background-color: rgb(232,244,217);"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></div>
</div></body></html>
虽然在编辑器中看起来像这样:
解决方法
能够通过添加以下 CSS 并删除目标元素上的内联样式来修改高度:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>My Email Subject</title>
<style>
body {
height: 100%;
width: 100%;
}
.columnContainer {
height: 170px;
min-width: 15px;
padding: 10px;
vertical-align: top;
word-wrap: break-word;
word-break: break-word;
background-color: rgb(204,208,255);
}
.columnContainer {
height: 170px;
min-width: 15px;
padding: 10px;
vertical-align: top;
word-wrap: break-word;
word-break: break-word;
background-color: rgb(204,255);
}
td {
min-height: 70px;
min-width: 15px;
width: 290.00px;
}
.inner {
min-height: 70px;
min-width: 15px;
width: 290.00px;
background-color: rgb(204,255,226);
}
/* below here is the original CSS*/
body,div {
font-family: /* @font-family */
Verdana,/* @font-family */
Arial,/* @font-family */
sans-serif/* @font-family */
;
font-size: /* @body-text-size */
14px/* @body-text-size */
;
color: /* @body-text-color */
#000/* @body-text-color */
;
background-color: /* @outer-background */
#fff/* @outer-background */
;
}
div div {
background-color: transparent;
}
[data-layout="true"] {
margin: 0 auto;
max-width: /* @layout-max-width */
600px/* @layout-max-width */
;
}
p {
margin: 0px;
padding: 0px;
line-height: 20px;
mso-line-height-rule: at-least;
}
ul,ol {
margin-top: 15px;
margin-bottom: 15px;
line-height: 20px;
mso-line-height-rule: at-least;
}
p img {
max-width: 100%;
}
a {
text-decoration: none;
}
u a {
text-decoration: underline;
}
h2,h3,h4 {
margin: 0px;
}
.imageWrapper a img {
text-decoration: none;
border: 0px;
}
body[data-outlook-cycle] .tbContainer {
display: block !important;
}
body[data-outlook-cycle] .tbContainer.multi table {
table-layout: fixed;
height: auto !important;
}
body[data-outlook-cycle] .tbContainer.multi td {
width: auto !important;
min-height:70px !important;
}
body[data-outlook-cycle] .tbContainer.multi tr td {
display: block;
}
body[data-outlook-cycle] .tbContainer.multi .inner {
height: auto !important;
min-height: auto !important;
}
body[data-outlook-cycle] .tbContainer .inner {
box-sizing: border-box
}
body[data-outlook-cycle] .outer {
width: auto !important;
}
body[data-outlook-cycle] .innerTable {
min-height: auto !important;
}
@media only screen and (max-width: 768px) {
.columnContainerWrapper {
min-height: 70px !important;
}
a span {
line-height: inherit !important;
}
}
@media only screen and (max-width: 768px) {
.tbContainer {display: block !important;}
.tbContainer.multi table {
table-layout: fixed;
height:auto !important;
}
.tbContainer.multi td {
width: auto !important;
min-height:70px !important;
}
.tbContainer.multi tr,.tbContainer.multi tr td {display: block}
.tbContainer.multi .inner {
height: auto !important;
}
.tbContainer .inner {box-sizing: border-box}
.outer {
width: auto !important;
}
.innerTable {
min-height: auto !important;
}
}
</style>
<meta name="html-editor"></head>
<body><div data-layout="true">
<div data-section="true" class=""><table class="outer" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse;width: 600px;display: block;">
<tbody>
<tr>
<td style="vertical-align: top; padding: 10px; background-color: rgb(253,222,207);">
<table style="
display: block;
width: 100%;
border-collapse: collapse;
" class="containerWrapper tbContainer multi" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td data-container="true" class="columnContainer" data-container-width="50" style="
min-height: 70px;
min-width: 15px;width: 290.00px;
;" id="container4cab7d4be62be1622552139868">
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; min-height: 90px;" class="innerTable">
<tbody>
<tr>
<td class="columnContainer inner ui-sortable" style="height: 70px; min-width: 15px; padding: 10px; vertical-align: top; word-wrap: break-word; word-break: break-word; background-color: rgb(204,255);"></td>
</tr>
</tbody>
</table>
</td>
<td data-container="true" class="columnContainer" data-container-width="50" style="
min-height: 0px;
min-width: 15px;width: 290.00px;
;" id="container0d27b048b79d51622552139868">
<table width="100%" cellpadding="0" cellspacing="0" class="innerTable" style="min-height: 90px;">
<tbody>
<tr>
<td class="columnContainer inner ui-sortable" style="height: 70px; min-width: 15px; padding: 10px; vertical-align: top; word-wrap: break-word; word-break: break-word; background-color: rgb(232,244,217);"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></div>
</div></body></html>
看起来编辑器也会应用样式。
在进一步研究时遇到了这个:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。