Mik*_*key 1 html css email outlook gmail
我正在创建一个HTML电子邮件,我很难在Outlook和Gmail中呈现图像.我有通常的问题,即在Gmail的表行之间添加了额外的空间,但是将块分配给图像的显示样式,如下所示:
style="display:block;"
不起作用.我设法找到的唯一修复是在所有td元素上将行高设置为零:
<td style="line-height=0">
但是当我这样做时,Outlook会切断我图像的所有顶部!我还可以使用其他任何修复方法吗？
- - 编辑 - - -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Email Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">
img
{
display:block;
}
</style>
</head>
<body style:"margin:0; padding:0;">
<table cellpadding="0" cellspacing="0" width="100%" border="0" style="border-spacing:0;border:0">
<table align="center" cellpadding="0" cellspacing="0" width="200"
border="0" style="border-collapse:collapse;background-color:black;padding:0;border-spacing:0;">
<tr style="display:block;">
<td style="padding:0;border:0;border-collapse:collapse;width:20%;margin:0;">
<img src="http://test..co.za/Custom//images/EMail_logocrop.png" style="display:block;"/>
</td>
<td style="color:White;">
If you are having trouble viewing this email <a href="" style="color:White;">click here</a>
</td>
</tr>
<tr style="display:block;line-height:0;">
<td colspan="2">
<img src="http://test..co.za/Custom//images/EMail_logo.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2" >
<img src="http://test..co.za/Custom//images/EMail_bet.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2" >
<img src="http://test..co.za/Custom//images/EMail_stand.jpg" style="display:block;">
</td>
</tr>
<tr>
<td colspan="2" style="width:100%;line-height:0;">
<img src="http://test..co.za/Custom//images/EMail_games.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2" >
<img src="http://test..co.za/Custom//images/EMail_grasscrop.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0;" >
<tr>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop2.png" style="display:block;" />
</td>
<td>
<img src="http://test..co.za/Custom//images/EMail_pslcrop.png"/ style="display:block;">
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop3.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_chelseacrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop4.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_cricketcrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop5.png" style="display:block;"/>
</td>
</tr>
<tr>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop6.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscroppsl.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop7.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscropchelsea.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop8.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscropt20.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop9.png" style="display:block;"/>
</td>
</tr>
<tr>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop10.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_sharkcrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop11.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_arsenalcrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop12.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_ligacrop.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop13.png" style="display:block;"/>
</td>
</tr>
<tr style="padding:0px;">
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop14.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscropshark.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop15.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscroparsenal.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop16.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscropliga.png" style="display:block;"/>
</td>
<td >
<img src="http://test..co.za/Custom//images/EMail_grasscrop17.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="7" >
<img src="http://test..co.za/Custom//images/EMail_grasscrop18.png" style="display:block;"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left:10px;">
<img src="http://test..co.za/Custom//images/EMail_footer.png" style="display:block;"/>
</td>
</tr>
<tr>
<td colspan="2">
<img src="http://test..co.za/Custom//images/EMail_grasscropbottom.png" style="display:block;"/>
</td>
</tr>
</table>
</table>
用于您的图像:
style="margin: 0; border: 0; padding: 0; display: block;"
这将防止它们周围的任何间距.如果间距仍然存在,那是因为表本身,特别是微软插入的额外(这里是坏词).
您是否正在从Outlook发送/转发到Gmail？如果是这种情况,那么差距是不可避免的.见这里类似的问题.请注意,表旁边的表(在代码中,但在页面上堆叠)比表行产生更大的间隙,并且通过在包装父元素上设置颜色,您可以隐藏它们分开时创建的"线".
你的代码中有很多额外的东西,你真的不需要.只需table td {border-collapse: collapse;}输入您的样式标签,然后您需要的就是:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img alt="" src="" width="" height="" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
</table>
请注意,表格单元格需要大约19px的最小值,因为它可以是Outlook中的最小高度.我更喜欢围绕它设计,但有些人也会使用线高技巧.
| 归档时间： |
|
| 查看次数： |
13978 次 |
| 最近记录： |