我正在为outlook做签名。在浏览器中,它在outlook,gmail和其他本地邮件中也很好看。
在Android上它也很好但是当我在我的iPhone上发送电子邮件时,这条蓝线(在左边)被剥离,因为空格不起作用。它也发生在一封电子邮件中。
我已经创建了一些示例,表明这里的一切看起来都不错。
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" display:block; width:100%;>
<table style="
border-spacing: 0;
border: none;
border-collapse: collapse;
padding: 0;
margin: 0;
display: block;">
<tr>
<th rowspan="5" style="padding: 0px 0px 0px 15px; border-left:solid 10px #3580C2;"></th>
<th>
<div style="text-align:left; font-family:'Calibri light', sans-serif;">
<span style="font-size: 14px; display: inline; white-space: nowrap; color: #000; text-align:left;">Test</span><br><br>
<span style="font-size: 19px; display: inline; white-space: nowrap; color: #3580C2; text-align:left;">Name</span><br>
<span style="font-size: 14px; display: inline; white-space: nowrap; color: #000; text-align:left;">Test Test</span>
</div>
</th>
</tr>
<tr>
<td>
<img src="test/image001.png" width="139" height="209" alt="zdjecie" style="vertical-align: middle;">
</td>
<td style="vertical-align:middle; line-height: 1.5em;">
<div style="font-family:'Calibri', sans-serif; margin-left: 15px;">
<img alt="phone" src="test/image006.png" height="18" width="19" style="display: inline;" ></img>
<span style="font-size: 15; display: inline; white-space: nowrap;">  000 000 000</span>
<br>
<img alt="fax" src="test/image008.png" height="18" width="19" style="display: inline;">
</img>
<span style="font-size: 15; display: inline; white-space: nowrap;">  000 000 000</span>
<br>
<img alt="cell" src="test/image010.png" height="18" width="19" style="display: inline;">
</img>
<span style="font-size: 15; display: inline; white-space: nowrap;">  000 000 000</span>
<br>
<img alt="mail" src="test/image012.png" height="18" width="19" style="display: inline; "></img>
<span style="font-size: 15; display: inline">  name@web.com</span>
<br><br>
<span style="display: inline; font-size: 16"><b>Company</b></span>
<br>
<span style="display: inline; font-size: 15">Address</span>
<br>
<span style="display: inline; font-size: 15">NIP: 00000000</span>
<br>
<a style="color:black; text-decoration:none; display: block;" href="http://www.web.com">
<span style="display: inline; font-size: 16;"><b>www.web.com</b></span></a>
<br>
</div>
</td>
</tr>
</table>
<table style="
border-spacing: 0;
border: none;
border-collapse: collapse;
padding: 0;
margin: 0;
display: block;">
<tr>
<th rowspan="3" style="white-space: nowrap; padding: 0px 0px 0 15px; border-left:solid 10px #3580C2; margin-bottom: 0;
padding-bottom: 0; text-align:left; line-height: 18px;"></th>
<td rowspan="2">
<br>
<img src="test/image014.png" style="width: 274px; height: 35px;"></img>
<br><br>
</td>
</tr>
</table>
<table style="
border: none;
border-collapse: collapse;
padding: -10px 0px 0px 0px;
margin: 0;
display: block;">
<tr>
<th rowspan="3" style="white-space: nowrap; padding: 0px 0px 0 15px; border-left:solid 10px #3580C2; margin-bottom: 0;
padding-bottom: 0; text-align:left; line-height: 18px;"></th>
<th colspan="3"></th>
</tr>
<tr>
<td style="width: 760px;">
<div style="font-family:'Calibri', sans-serif; font-size:10px; color:#aaa; margin-left: 15px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam suscipit justo eros. Vivamus dictum tempus venenatis. Donec at tincidunt quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam suscipit justo eros. Vivamus dictum tempus venenatis. Donec at tincidunt quam. Phasellus sodales elementum nisl ornare ultricies. Sed leo ex, congue sed gravida eu, accumsan vel dui. Vivamus dolor mi, pharetra non augue ut, eleifend porta ipsum. Ut laoreet pellentesque sem ac imperdiet. Nulla nec enim metus. Nam interdum, nisl at pharetra venenatis, dolor odio efficitur neque, eget tincidunt purus erat sed velit. Curabitur dictum, augue vel auctor bibendum, quam nisl malesuada leo, eu gravida est turpis at justo. Nullam quis urna a eros accumsan tristique dictum eget massa. Vivamus fermentum ante metus, maximus eleifend dui ultricies ut. Suspendisse potenti. Quisque ut vehicula augue. Ut interdum efficitur eros, porta mollis odio semper quis..</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam suscipit justo eros. Vivamus dictum tempus venenatis. Donec at tincidunt quam. Phasellus sodales elementum nisl ornare ultricies. Sed leo ex, congue sed gravida eu, accumsan vel dui. Vivamus dolor mi, pharetra non augue ut, eleifend porta ipsum. Ut laoreet pellentesque sem ac imperdiet. Nulla nec enim metus. Nam interdum, nisl at pharetra venenatis, dolor odio efficitur neque, eget tincidunt purus erat sed velit. Curabitur dictum, augue vel auctor bibendum, quam nisl malesuada leo, eu gravida est turpis at justo. Nullam quis urna a eros accumsan tristique dictum eget massa. Vivamus fermentum ante metus, maximus eleifend dui ultricies ut. Suspendisse potenti. Quisque ut vehicula augue. Ut interdum efficitur eros, porta mollis odio semper quis.</p>
</div>
</td>
</tr>
</table>
</body>
这就是蓝线发生的事情。它看起来像三张桌子之间有很大的空间。 Stripped line
答案 0 :(得分:1)
我对你的问题本身没有回答,但是只是简单地在整个表格上放一个div并使用下面的css就更容易了:
.divclass {
border-left-width:10px;
border-left-style:solid;
border-left-color:#3580C2;
}
我认为这本来会更容易,也许它对你的IOS问题也有帮助吗?评论它是否可以解决您的问题:)
编辑:我忘了如果你在桌子上做一个div,你可能需要漂浮:左...divclass {
border-left-width:10px;
border-left-style:solid;
border-left-color:#3580C2;
float:left;
}