英文:
Outlook signature with HTML in Exchange
问题
我被要求在Outlook中创建一个通用签名。观看了一些教程后，我编写了一段HTML代码以将其放入Exchange。
问题在于在Outlook应用程序中，图标旁边的项目没有居中，但如果我执行.html文件，则显示正确。
有人知道我哪里出错了吗？
这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logo Firma</title>
</head>
<body>
<table>
<tbody>
<tr>
<td style="border-right: 3px solid #007cc2;"><img style="padding-right: 10px; display: flex;" src="https://i.postimg.cc/26xJ0Pz7/logo.png"></td>
<td>
<table style="font-family: Arial, Helvetica, sans-serif; color: #111628; padding-left: 10px;">
<tbody>
<!--NOMBRE DE LA PERSONA-->
<tr><td style="font-size: 14px; font-weight: bold;">Full Name</td></tr>
<!--DEPARTAMENTO AL QUE PERTENECE-->
<tr><td style="font-size: 12px; font-weight: bold;">Area</td></tr>
<!--TELEFONO DE LA EMPRESA E INTERNO-->
<tr><td style="padding-top: 5px; display:flex; align-items: center; font-size: 12px;"><img style="float: left; padding-right: 10px; width: 20px; height: 20px" src="https://i.postimg.cc/zDSGNj8H/phone.png"> 22223344</td></tr>
<!--CELULAR-->
<tr><td style="padding-top: 5px; display:flex; align-items: center; font-size: 12px;"><img style="float: left; padding-right: 10px; width: 20px; height: 20px" src="https://i.postimg.cc/NMRf58XV/smartphone.png"> +123 94333222</td></tr>
<!--PAGINA WEB DE LA EMPRESA-->
<tr><td style="padding-top: 5px; display:flex; align-items: center; font-size: 12px;"><img style="float: left; padding-right: 10px; width: 20px; height: 20px" src="https://i.postimg.cc/vHYHZVZq/globe.png"> <a style="text-decoration: none; color: #111628;" href="www.akesse.com.uy/" target="_blank"> Pagina Web</a></td></tr>
<!--DIRECCION DE LA EMPRESA-->
<tr><td style="padding-top: 5px; display:flex; align-items: center; font-size: 12px;"><img style="float: left; padding-right: 10px; width: 20px; height: 20px" src="https://i.postimg.cc/ZncbLTVx/map-pin.png"> Somewhere<br>City, Country</td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
这是在Google Chrome上的外观
这是在Outlook App上的外观
我不知道还能做什么，我尝试修改CSS样式，但结果并不如我所期望的那样。
英文:
I was asked to do a general signature in Outlook. After watching some tutorials, I wrote a code in HTML to put it in Exhange.
The problem is that in Outlook App the items next to the icons are not center, but if I execute the .html file It looks correct.
Does anybody know where I'm failing?
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logo Firma</title>
</head>
<body>
<table>
<tbody>
<tr>
<td style="border-right: 3px solid #007cc2;"><img style="padding-right: 10px; display: flex;" src="https://i.postimg.cc/26xJ0Pz7/logo.png"></td>
<td>
<table style="font-family: Arial, Helvetica, sans-serif; color: #111628; padding-left: 10px;">
<tbody>
<!--NOMBRE DE LA PERSONA-->
<tr><td style="font-size: 14px; font-weight: bold;">Full Name</td></tr>
<!--DEPARTAMENTO AL QUE PERTENECE-->
<tr><td style="font-size: 12px; font-weight: bold;">Area</td></tr>
<!--TELEFONO DE LA EMPRESA E INTERNO-->
<tr><td style="padding-top: 5px; display:flex; align-items: center; font-size: 12px;"><img style="float: left; padding-right: 10px; width: 20px; height: 20px" src="https://i.postimg.cc/zDSGNj8H/phone.png"> 22223344</td></tr>
<!--CELULAR-->
<tr><td style="padding-top: 5px; display:flex; align-items: center; font-size: 12px;"><img style="float: left; padding-right: 10px; width: 20px; height: 20px" src="https://i.postimg.cc/NMRf58XV/smartphone.png"> +123 94333222</td></tr>
<!--PAGINA WEB DE LA EMPRESA-->
<tr><td style="padding-top: 5px; display:flex; align-items: center; font-size: 12px;"><img style="float: left; padding-right: 10px; width: 20px; height: 20px" src="https://i.postimg.cc/vHYHZVZq/globe.png"> <a style="text-decoration: none; color: #111628;" href="www.akesse.com.uy/" target="_blank"> Pagina Web</a></td></tr>
<!--DIRECCION DE LA EMPRESA-->
<tr><td style="padding-top: 5px; display:flex; align-items: center; font-size: 12px;"><img style="float: left; padding-right: 10px; width: 20px; height: 20px" src="https://i.postimg.cc/ZncbLTVx/map-pin.png"> Somewhere<br>City, Country</td></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
This is how it looks on Google Chrome
This is how it looks on Outlook App
I don't know what else to do, I've try modifying CSS styles but It did not result as I expected.
答案1
得分: 0
Outlook（桌面版 Windows？）不支持display: flex，或对display的任何更改。您必须使用一个td标签来放置图像，另一个td标签来放置文本，并使用内边距（padding）和行高（line-height）来垂直居中它们。
因此，未经测试的代码如下：
<tr>
<td style="padding: 5px;"><img width="20" height="20" src="https://i.postimg.cc/ZncbLTVx/map-pin.png"></td>
<td style="padding: 5px; font-size: 12px; line-height: 16px;">Somewhere<br>City, Country</td>
</tr>
请注意，width=和height=属性的使用，这在Outlook中是必需的（Outlook不识别在img标签中使用style="width..."的方式）。
英文:
Outlook (desktop Windows?) doesn't support display:flex, or any changes to display. You have to use a td for the image, and another td for the text, and use padding and line-height to vertically center them.
So, untested:
<tr><td style="padding: 5px;"><img width="20" height="20" src="https://i.postimg.cc/ZncbLTVx/map-pin.png"></td><td style="padding: 5px; font-size: 12px;line-height:16px;"> Somewhere<br>City, Country</td></tr>
Note the use of width= and height=, needed for Outlook (it doesn't recognise style="width..." in the img tag).
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论