HTML签名仅调整Outlook中的一些图像 [英] HTML signature is resizing only some images in Outlook
问题描述
我在HTML中制作了一个电子邮件签名，似乎遵循大多数指南（表格，内联样式等），并且在大多数客户端上它看起来相当不错。但是，它必须在Outlook上看起来很奇怪，这是它从Outlook收到回复后返回给我的电子邮件客户端的原因： $ b
标志完全正常，但社交标志已缩放。
code is on fiddle ，但以下是这些图片的代码：
< td valign =middlestyle =padding：0px 8px 0px 0px; border：0px; outline：none;> ;
< div style =margin：0px; padding：0px; border：0px; outline：none; float：left;>
< img width =110height =60src =https://i.imgur.com/FjK5XfG.pngstyle =border：none; vertical-align：middle;>
< / div>
<跨度>
< span>
< img src =http://i.imgur.com/zrHJLme.pngwidth =7pxheight =15px>
< / a>
< img src =http://i.imgur.com/psyZ0A1.pngwidth =16pxheight =13.5px>
< / a>
< a href =https://www.linkedin.com/in/weinbergjbtarget =_ blankstyle =display：inline-block; width：15px; height：15px;>
< img src =http://i.imgur.com/ZyAuqXx.pngwidth =15pxheight =15px>
< / a>
< / span>
< / span>
Outlook（可能还有其他应用程序）忽略当您添加 px 单位时， width 属性到价值。该规范不是100％清晰的，但是，默认情况下整数值被认为是像素，你可以为一个百分比值添加一个％后缀。
根据规范，该值必须是非负整数，并且没有提及添加 px 后缀的要求：
img，iframe，embed，object，video，
的宽度和高度属性，以及当它们的type属性位于Image按钮状态下，可以指定输入
元素以给出元素的可视内容
的尺寸（相对于输出介质的
标称方向分别为宽度和高度），in CSS像素。
属性（如果指定）必须具有有效的非负
整数值。
更多阅读：
- org / TR / 2012 / WD-html5-20121025 / dimension-attributes.html＃attr-dim-heightrel =nofollow noreferrer> W3 HTML Dimension Attributes Spec
总之，有效的代码应该是：
< img src =urlwidth =7height =15>
I made an email signature in HTML that seems to follow most guidelines (tables, inline styles, etc.) and it looks pretty decent on most clients. However, it must look weird on Outlook, bc this is how it was returned to my email client after getting a reply from Outlook:
The logo is perfectly fine, but the social logos got reaaaaally scaled. The code is on fiddle, but here's what the code for the images look like:
<td valign="middle" style="padding: 0px 8px 0px 0px; border: 0px; outline: none;">
<div style="margin: 0px; padding: 0px; border: 0px; outline: none; float: left;">
<img width="110" height="60" src="https://i.imgur.com/FjK5XfG.png" style="border: none; vertical-align: middle;">
</div>
<span>
<span>
<a href="https://www.facebook.com/ChemProChemistryTutor/" target="_blank" style="color: rgb(0, 0, 0); text-decoration: none; outline: none; border: none; font-size: 11px; font-family: arial; background: transparent; display: inline-block;width: 7px;height: 15px;margin-right: 15px;">
<img src="http://i.imgur.com/zrHJLme.png" width="7px" height="15px">
</a>
<a href="https://twitter.com/101educ" target="_blank" style="color: rgb(0, 0, 0); text-decoration: none; outline: none; border: none; font-size: 11px; font-family: arial; background: transparent; display: inline-block;width: 16px;height: 13.5px;margin-right: 15px;">
<img src="http://i.imgur.com/psyZ0A1.png" width="16px" height="13.5px">
</a>
<a href="https://www.linkedin.com/in/weinbergjb" target="_blank" style="display: inline-block;width: 15px;height: 15px;">
<img src="http://i.imgur.com/ZyAuqXx.png" width="15px" height="15px">
</a>
</span>
</span>
It seems that Outlook (and possibly other applications) ignore the height and width properties when you add the px unit to the value. The spec is not 100% clear on this, however, by default integer values are considered pixels and you can add a % suffix for a percentage value.
According to the spec, the value must be a non-negative integer and does not mention a requirement to add the px suffix:
The width and height attributes on img, iframe, embed, object, video, and, when their type attribute is in the Image Button state, input elements may be specified to give the dimensions of the visual content of the element (the width and height respectively, relative to the nominal direction of the output medium), in CSS pixels. The attributes, if specified, must have values that are valid non-negative integers.
Further reading:
To conclude, the valid code should be:
<img src="url" width="7" height="15">
这篇关于HTML签名仅调整Outlook中的一些图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
