html-email - Outlook中的mso-line-height剪切图像
问题描述
我正在为客户端构建一个 html 模板,它将在 mailchimp 中创建一个拖放构建器。
我已mso-line-height:exactly
全局使用该属性来控制 Outlook 应用的不稳定行高。
但是 - 正因为如此,当客户端使用“插入图像”文本编辑器将图像插入正文文本时,图像将被剪切到文本的行高 - 例如,如果行高为 20px,则图像仅显示底部 20 像素。
我通过研究提供的解决方案是,我必须全局删除 mso-line-height 属性,并且仅在我真正需要时将其应用到 html 代码中——尽管这不是客户可以维护的。
如何仅在图像上删除此属性?我希望确切的规则到位,直到插入图像时将其删除。
我试过了
img {
border:0 !important;
outline:none !important;
display:block !important;
mso-line-height-rule:at-least !important;
mso-height-source:userset !important;
}
并且还在mailchimp界面内的代码编辑器中手动设置“最小高度:插入图像高度!重要”,但没有任何效果。
目前,您似乎只有 2 个选项
1 - 你有正确的行高,但客户端永远不能在文本中插入图像(必须是预先设计的表格单元格以在其中包含图像)
或者
2 - 您有不正确的行高和未剪裁的图像,但可以在需要时插入它们。
是否有解决方案不涉及每次编辑html但可以在css中处理?
这是我最初的造型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if gte mso 15]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta content="telephone=no" name="format-detection">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>template</title>
<style type="text/css">
body{
margin:0 !important;
padding:0 !important;
-webkit-text-size-adjust:100% !important;
-ms-text-size-adjust:100% !important;
-webkit-font-smoothing:antialiased !important;
}
/*
@tab Button
@section background-Colour
*/
.button{
/*@editable*/background-color:#e5e5e5 !important;
/*@editable*/color:#000000 !important;
height:43px !important;
margin-right:0 !important;
font-size:15px !important;
padding:0 5px !important;
}
/*
@tab Button_2
@section background-Colour
*/
.button_2{
/*@editable*/background-color:#e5e5e5 !important;
/*@editable*/color:#000000 !important;
margin-right:0 !important;
font-size:15px !important;
padding:0 5px!important;
}
a{
text-decoration:none !important;
color:black !important;
}
span.red-2{
color:#bc3434 !important;
}
span.white-force {
color:#ffffff !important;
text-decoration: none;
}
.white-force a {
color:#ffffff !important;
text-decoration: none;
}
img{
border:0 !important;
outline:none !important;
display:block !important;
}
table{
border-collapse:collapse;
mso-table-lspace:0;
mso-table-rspace:0;
}
td{
border-collapse:collapse;
mso-line-height-rule:exactly;
}
a,span{
mso-line-height-rule:exactly;
}
.ExternalClass *{
line-height:100%;
}
.white a{
color:#ffffff;
text-decoration:none;
}
.white1 a{
color:#333333;
text-decoration:none;
background-color:#333333;
}
.white2 a{
text-decoration:none;
}
.black a{
text-decoration:none;
}
.black3 a{
text-decoration:none;
}
.black2 a{
text-decoration:none;
}
.red a{
text-decoration:none;
}
.grey a{
text-decoration:none;
}
.grey1 a{
text-decoration:none;
}
.applewhiltelink a{
color:inherit !important;
text-decoration:none !important;
}
.video img{
width:100%;
height:auto;
}
.mcnTextContent img{
height:auto !important;
}
@media only screen and (min-width:481px) and (max-width:599px){
table[class=wrapper]{
width:100% !important;
}
} @media only screen and (min-width:481px) and (max-width:599px){
table[class=main_table]{
width:100% !important;
}
} @media only screen and (min-width:481px) and (max-width:599px){
td[class=pad_side]{
padding-left:14px !important;
padding-right:14px !important;
}
} @media only screen and (min-width:481px) and (max-width:599px){
td[class=hide],br[class=hide]{
display:none !important;
}
} @media only screen and (min-width:481px) and (max-width:599px){
img[class=full_img]{
width:100% !important;
height:auto !important;
}
} @media only screen and (min-width:481px) and (max-width:599px){
td[class=text],td[class=black],td[class=black2],td[class=red],td[class=white],td[class=white1],td[class=white2],td[class=grey], td[class=white-force]{
text-align:center !important;
}
} @media only screen and (min-width:481px) and (max-width:599px){
td[class=pad_bottom]{
padding-bottom:30px !important;
}
} @media only screen and (min-width:481px) and (max-width:599px){
td[class=pad_top],
td[class=pad_top_split]{
padding-top:30px !important;
}
} @media only screen and (min-width:481px) and (max-width:599px){
td[class=fix_height]{
height:30px !important;
}
} @media only screen and (min-width:481px) and (max-width:599px){
td[class=video] img{
width:100% !important;
height:auto !important;
}
} @media only screen and (max-width:480px){
table[class=wrapper]{
width:100% !important;
}
} @media only screen and (max-width:480px){
table[class=main_table]{
width:100% !important;
}
} @media only screen and (max-width:480px){
td[class=pad_side]{
padding-left:14px !important;
padding-right:14px !important;
}
} @media only screen and (max-width:480px){
td[class=hide],br[class=hide]{
display:none !important;
}
} @media only screen and (max-width:480px){
img[class=full_img]{
width:100% !important;
height:auto !important;
max-width: none !important;
}
} @media only screen and (max-width:480px){
td[class=text],td[class=black],td[class=black2],td[class=red],td[class=white],td[class=white1],td[class=white2],td[class=grey],td[class=white-force]{
text-align:center !important;
}
} @media only screen and (max-width:480px){
td[class=pad_bottom]{
padding-bottom:30px !important;
}
} @media only screen and (max-width:480px){
td[class=pad_top],
td[class=pad_top_split]{
padding-top:30px !important;
}
} @media only screen and (max-width:480px){
td[class=fix_height]{
height:30px !important;
}
} @media only screen and (max-width:480px){
td[class=video] img{
width:100% !important;
height:auto !important;
}
}
@media only screen and (max-width:480px){
td[class=pad_top_split]{
padding-top:0 !important;
}
}</style></head>
*编辑
每个包含文本的块(但可能不一定以其中的图像结尾,具有 .grey 类 - 我尝试了这些选项但无济于事
.grey img {
line-height: 100px (random but taller then the test image)!important;
}
并且
.grey img {
line-height:unset !important;
}
我只想在文本中插入任何图像来忽略周围的行高。
这是一个示例块
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper" mc:repeatable mc:variant="text block" style="table-layout:fixed;margin-left:auto;margin-right:auto;">
<tr>
<td valign="top" bgcolor="#000000">
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper">
<tr>
<td width="50" align="center" class="hide"> </td>
<td valign="top" class="pad_side">
<table width="550" border="0" cellspacing="0" cellpadding="0" align="center" class="wrapper">
<tr>
<td valign="top" height="40" class="fix_height"> </td>
</tr>
<tr>
<td align="center" valign="top" style="font-family:Arial, sans-serif;font-size:15px;line-height:25px;color:#000000;background-color:#000000;" mc:edit="lorem_ipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae interdum ligula. Pellentesque feugiat ligula ligula, in interdum dolor aliquet et.</td>
</tr>
<tr>
<td valign="top" height="40" class="fix_height"> </td>
</tr>
</table>
</td>
<td width="50" align="center" class="hide"> </td>
</tr>
</table>
</td>
</tr>
</table>
解决方案
试试mso-line-height-rule: at-least
你的图片。它本质上与mso-line-height-rule: exactly
.
这篇博文可能会提供更多见解。
在我自己的构建中,我将此 Outlook 条件样式块添加到我的其他嵌入样式下方。然后在我的内联样式中,我避免使用 mso-line-height 规则,并且只将 font-size/line-height 设置为正常
<!--[if mso]>
<style>
td,th,p,a,h1,h2,h3,h4,h5,h6 {
mso-line-height-rule: exactly;
}
<style>
<![endif]-->
推荐阅读
- java - 如何在recyclerview中设置按钮单击时将变量的值总和到textview?
- mysql - 为子选择的每个结果选择列
- cypress - 赛普拉斯使用前钩子登录一次
- python - How to select keys from a dictionary by their order?
- virtual-machine - 无法通过 Hyper-V 创建的虚拟 NIC 上的 IP 地址访问主机端口
- python - 有没有办法在 python 中使用 xlsxwriter 在线访问 excel 文件?
- openlayers-6 - 在 VectorTileSource OpenLayers 中使用 url 与 tileUrlFunction 时 y 值的差异
- c++ - 如何在 gn 中包含共享库
- reactjs - ';' react js中的预期错误ts(1005),为什么我会收到这个错误?
- python - 如何在 Azure 应用服务上配置 Nginx .conf 文件