对HTML使用vml会产生内联CSS问题
[英]using vml for html creates issues with inline css
问题描述
使用HTML代码和VML（用于背景图片）将新闻通讯发送给客户。 在使用VML之前，内联CSS可以正常工作，但是将VML添加到代码中后，它将停止在OUTLOOK中工作。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="utf-8" name="viewport" content="width:50"/>
<title> Transaction Alert from KVB </title>
</head>
<body>
<div>
<table style="border:1px solid black" width="600" height="600" align="center" cellpadding="0" cellspacing="0" border="0" >
<tr>
<!-- Backup background color is #DDDDDD -->
<td style="background-image: url('http://www.kvbsmart.com/mail_img/bg.jpg');" background="http://www.kvbsmart.com/mail_img/bg.jpg" valign="top" align="left" >
<!--[if gte mso 9]>
<v:rect style="width:600px;height:600px;" strokecolor="none">
<v:fill type="tile" src="http://www.kvbsmart.com/mail_img/bg.jpg" color="#7bceeb"/></v:fill>
</v:rect>
<v:shape id="theText" style="position:absolute;width:600px;height:600px;">
<![endif]-->
<a href="http://www.kvb.co.in/">
<center><img src="http://www.kvbsmart.com/mail_img/1111.png" width="600" height="300"></center>
</a>
<div STYLE="color: WHITE; background-color: #00844A; border: 1px solid white; padding: 15px;border-radius: 20px; border-collapse: separate;">
<center><font face="Verdana">A.MESSAGE</center></font></div>
<p><font face="Verdana" size ="1"><center>Note: If the transaction is not done by you, please contact our Helpline at the earliest.</font></center></p>
<br><br><br><br>
<a href="http://www.kvb.co.in/">
<center><img src="http://www.kvbsmart.com/mail_img/mpay_new.png" width="600" height="130"></center>
</a>
<br>
<br>
<p><font face="Verdana">With Regards,</font></p>
<p><font face="Verdana">Karur Vysya Bank.</font></p>
<hr width = 100%>
<br>
<div style="max-width:auto; word-wrap:break-word;"><font face="Verdana">This E-Alert was automatically generated by the system. Please do not reply to this mail. For any further clarifications, kindly contact your Home branch/our Helpline Number 1860 200 1916 (Local call charges applicable).</font> </div>
<p><font face="Verdana"> This E-Alert was automatically generated by the system. Please do not reply to this mail. For any further clarifications, kindly contact your Home branch/our Helpline Number 1860 200 1916 (Local call charges applicable)</font> </p>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td></tr>
</table></div>
<body></html>
我特别在这个街区遇到问题
<div STYLE="color: WHITE; background-color: #00844A; border: 1px solid white; padding: 15px;border-radius: 20px; border-collapse: separate;">
<center><font face="Verdana">A.MESSAGE</center></font></div>
请帮帮我，我正在添加屏幕截图供您参考
1 个解决方案
解决方案1
0 2016-01-30 07:28:21
我已经解决了这个问题，方法是删除div标签并将其替换为表格
我正在提供完整的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="utf-8" name="viewport" content="width:50"/>
<title> Transaction Alert from KVB </title>
</head>
<body>
<div>
<table style="border:1px solid black" width="600" height="800" align="center" cellpadding="0" cellspacing="0" border="0" >
<tr>
<!-- Backup background color is #DDDDDD -->
<td style="background-image: url('http://www.kvbsmart.com/mail_img/bg.jpg');" background="http://www.kvbsmart.com/mail_img/bg.jpg" valign="top" align="left" >
<!--[if gte mso 9]>
<v:rect style="width:600px;height:900px;" strokecolor="none">
<v:fill type="tile" src="http://www.kvbsmart.com/mail_img/bg.jpg" color="#7bceeb"/></v:fill>
</v:rect>
<v:shape id="theText" style="position:absolute;width:600px;height:900px;z-index:3;">
<v:textbox inset="0,0,0,0">
<![endif]-->
<a href="http://www.kvb.co.in/">
<center><img src="http://www.kvbsmart.com/mail_img/1111.png" width="600" height="300"></center>
</a>
<!------THIS IS THE PART WHERE I HAVE DONE THE MODIFICATION-->
<table width = "100%" border-collapse: separate; border-spacing: 0;>
<td STYLE="color: WHITE; background-color: #00844A; border: 1px solid white; padding: 15px;border-radius: 20px; border-collapse: separate;">
<center><font face="Verdana">A.MESSAGE</center></font></td>
</table>
<p><font face="Verdana" size ="1"><center>Note: If the transaction is not done by you, please contact our Helpline at the earliest.</font></center></p>
<br><br><br><br>
<a href="http://www.kvb.co.in/">
<center><img src="http://www.kvbsmart.com/mail_img/mpay_new.png" width="600" height="130"></center>
</a>
<br>
<br>
<p><font face="Verdana">With Regards,</font></p>
<p><font face="Verdana">Karur Vysya Bank.</font></p>
<hr width = 100%>
<br>
<div style="max-width:auto; word-wrap:break-word;"><font face="Verdana">This E-Alert was automatically generated by the system. Please do not reply to this mail. For any further clarifications, kindly contact your Home branch/our Helpline Number 1860 200 1916 (Local call charges applicable).</font></div>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td></tr>
</table></div>
<body></html>
保存时，内联css在文本编辑器中被擦除。 它创建了一个丑陋的html按钮，无处可去
[英]Inline css is being erased in text editor when I save. It creates an ugly html button that leads nowhere
Outlook中的HTML电子邮件背景破坏布局-使用VML方法
[英]HTML email background breaking layout in Outlook - using vml method
使用 HTML 宽度 CSS 创建大型 CLS，有没有更有效的方法？
[英]Using HTML Width CSS creates large CLS, is there a more efficient way?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.