Outlook живое изображение, завернутое в p с интервалом - PullRequest
Новая
       13

Outlook живое изображение, завернутое в p с интервалом

0 голосов
/ 24 апреля 2020

У меня есть подпись с изображением. при отображении в outlook live под изображением появляется пустое пространство.

При просмотре css в живом варианте и тестировании вокруг я получаю впечатление, что при попытке добавить вертикальное выравнивание по низу оно не будет принято. Также все обернуто в

Код для моего внешнего вида 20xx hmtl: 

<td width="106pt" height="80pt" valign="bottom" style="width:106pt; height:80pt; padding:0cm 0cm 0cm 0cm;overflow:hidden;">
<span style="">
    <!--[if gte vml 1]>
        <v:shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f">
        <v:stroke joinstyle="miter"/> 
        <v:formulas> 
            <v:f eqn="if lineDrawn pixelLineWidth 0"/> 
            <v:f eqn="sum @0 1 0"/> <v:f eqn="sum 0 0 @1"/> <v:f eqn="prod @2 1 2"/> <v:f eqn="prod @3 21600 pixelWidth"/> <v:f eqn="prod @3 21600 pixelHeight"/> <v:f eqn="sum @0 0 1"/> <v:f eqn="prod @6 1 2"/> <v:f eqn="prod @7 21600 pixelWidth"/> <v:f eqn="sum @8 21600 0"/> <v:f eqn="prod @7 21600 pixelHeight"/> <v:f eqn="sum @10 21600 0"/>
        </v:formulas> 
        <v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/> 
        <o:lock v:ext="edit" aspectratio="t"/> 
        </v:shapetype>
        <v:shape id="_x0000_i1025" type="#_x0000_t75" alt="" style='z-index:-9999999999;position:relative;vertical-align:bottom;width:106.5pt;height:79.5pt;left:0;right:0;top:0;bottom:0;border:none;padding:0;'> 
        <v:imagedata src="image_bestanden/image001.png" o:style="vertical-align:bottom;" o:href="https://logos.solvarea.nl/logo-klein.png"/> 
        </v:shape><![endif]--><!--[if !vml]-->
        <img width="142pt" height="106pt" src="image_bestanden/logo-klein.png" u1:shapes="Afbeelding_x0020_7" v:shapes="_x0000_i1025" style="z-index:-9999999999;position:relative;width:106.5pt;height:79.5pt;left:0;right:0;top:0;bottom:0;border:none;padding:0;"><!--[endif]--><o:p></o:p>
</span>

Код при просмотре с веб-почты Outlook в реальном времени: 

<td width="141" valign="bottom" style="width:106.0pt; padding:0cm 0cm 0cm 0cm; height:80.0pt">
<p class="x_MsoNormal">
    <span style="z-index:251659264;margin-left:0px;margin-top:0px;width:142px;height:106px;">
        <img data-imagetype="AttachmentByCid" originalsrc="cid:image001.png@01D61A2E.E1009D60" data-custom="AQMkADAwATM0MDAAMS0xYWYzLWRhMGUtMDACLTAwCgBGAAADIdns%2BrM%2FpU%2BgzRRu07Gu5wcAjNRFWKEIfkOT%2BKGV81qa2AAAAHlCn0AAAACM1EVYoQh%2BQ5P4oZXzWprYAAAAedFfHQAAAAESABAAgUBrLLMzc0O%2FwWz0AYsTMw%3D%3D" naturalheight="0" naturalwidth="0" src="https://attachment.outlook.live.net/owa/MSA%3Ainfo%40solvarea.nl/service.svc/s/GetAttachmentThumbnail?id=AQMkADAwATM0MDAAMS0xYWYzLWRhMGUtMDACLTAwCgBGAAADIdns%2BrM%2FpU%2BgzRRu07Gu5wcAjNRFWKEIfkOT%2BKGV81qa2AAAAHlCn0AAAACM1EVYoQh%2BQ5P4oZXzWprYAAAAedFfHQAAAAESABAAgUBrLLMzc0O%2FwWz0AYsTMw%3D%3D&amp;thumbnailType=2&amp;owa=outlook.live.com&amp;scriptVer=2020041301.15&amp;isc=1&amp;X-OWA-CANARY=NPjGibPcQ0qALOT-cp3ahvDPHwU26NcY09lJo-IPciyNM7BHpHxUc0IYLDQjPUhvEVmPgCyJ9XI.&amp;token=eyJhbGciOiJSUzI1NiIsImtpZCI6IjU2MzU4ODUyMzRCOTI1MkRERTAwNTc2NkQ5RDlGMjc2NTY1RjYzRTIiLCJ4NXQiOiJWaldJVWpTNUpTM2VBRmRtMmRueWRsWmZZLUkiLCJ0eXAiOiJKV1QifQ.eyJvcmlnaW4iOiJodHRwczovL291dGxvb2subGl2ZS5jb20iLCJ2ZXIiOiJFeGNoYW5nZS5DYWxsYmFjay5WMSIsImFwcGN0eHNlbmRlciI6Ik93YURvd25sb2FkQDg0ZGY5ZTdmLWU5ZjYtNDBhZi1iNDM1LWFhYWFhYWFhYWFhYSIsImlzc3JpbmciOiJXVyIsImFwcGN0eCI6IntcIm1zZXhjaHByb3RcIjpcIm93YVwiLFwicHJpbWFyeXNpZFwiOlwiUy0xLTI4MjctMjEyOTkzLTQ1MjE4ODY4NlwiLFwicHVpZFwiOlwiOTE0Nzk4NDIxNDY1NjE0XCIsXCJvaWRcIjpcIjAwMDM0MDAxLTFhZjMtZGEwZS0wMDAwLTAwMDAwMDAwMDAwMFwiLFwic2NvcGVcIjpcIk93YURvd25sb2FkXCJ9IiwibmJmIjoxNTg3NzIyMjk5LCJleHAiOjE1ODc3MjI4OTksImlzcyI6IjAwMDAwMDAyLTAwMDAtMGZmMS1jZTAwLTAwMDAwMDAwMDAwMEA4NGRmOWU3Zi1lOWY2LTQwYWYtYjQzNS1hYWFhYWFhYWFhYWEiLCJhdWQiOiIwMDAwMDAwMi0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvYXR0YWNobWVudC5vdXRsb29rLmxpdmUubmV0QDg0ZGY5ZTdmLWU5ZjYtNDBhZi1iNDM1LWFhYWFhYWFhYWFhYSIsImhhcHAiOiJvd2EifQ.nE62tvQW0Eq-Hp0PUso5xNSs1tWoKv7QkZ00CkUwZKp2crlChrYbKtSxYJS6DtwnVbkvn8l3E4_sevDp_4rW7iQa3yTHFC-vxHSlsp9WVQU7su2LoWfkAdpY1PX4OYyES0tqu6vFySz28h836onIS9wq8db1vbQgLA9Z5ScavNds38w43cPo_EclGhrRnuOcIMfmRUhzYEquvscmWc33V_jW6ETd__ZLnCY6LV3s_oOy_IrdzWWQyoGbU_Zr-cFX_zCMTcdRzcHrTiIUEjjevyjbLt7RWEvyLAP9AJsVBH_su1o6fuG9g8xpVhex77_FXMcrT20d812xrx62R1_a4g&amp;animation=true" width="142" height="106" alt="https://logos.solvarea.nl/logo-klein.png" style="cursor: pointer;" crossorigin="use-credentials">
    </span>
    <span style="font-size:12.0pt; font-family:&quot;Times New Roman&quot;,serif">
    </span>
</p>

Код должен быть (при добавлении выравнивания по вертикали: снизу; к изображению в браузере): 

<td width="141" valign="bottom" style="width:106.0pt; padding:0cm 0cm 0cm 0cm; height:80.0pt">
<p class="x_MsoNormal">
    <span style="z-index:251659264;margin-left:0px;margin-top:0px;width:142px;height:106px;">
        <img data-imagetype="AttachmentByCid" originalsrc="cid:image001.png@01D61A2E.E1009D60" data-custom="AQMkADAwATM0MDAAMS0xYWYzLWRhMGUtMDACLTAwCgBGAAADIdns%2BrM%2FpU%2BgzRRu07Gu5wcAjNRFWKEIfkOT%2BKGV81qa2AAAAHlCn0AAAACM1EVYoQh%2BQ5P4oZXzWprYAAAAedFfHQAAAAESABAAgUBrLLMzc0O%2FwWz0AYsTMw%3D%3D" naturalheight="0" naturalwidth="0" src="https://attachment.outlook.live.net/owa/MSA%3Ainfo%40solvarea.nl/service.svc/s/GetAttachmentThumbnail?id=AQMkADAwATM0MDAAMS0xYWYzLWRhMGUtMDACLTAwCgBGAAADIdns%2BrM%2FpU%2BgzRRu07Gu5wcAjNRFWKEIfkOT%2BKGV81qa2AAAAHlCn0AAAACM1EVYoQh%2BQ5P4oZXzWprYAAAAedFfHQAAAAESABAAgUBrLLMzc0O%2FwWz0AYsTMw%3D%3D&amp;thumbnailType=2&amp;owa=outlook.live.com&amp;scriptVer=2020041301.15&amp;isc=1&amp;X-OWA-CANARY=NPjGibPcQ0qALOT-cp3ahvDPHwU26NcY09lJo-IPciyNM7BHpHxUc0IYLDQjPUhvEVmPgCyJ9XI.&amp;token=eyJhbGciOiJSUzI1NiIsImtpZCI6IjU2MzU4ODUyMzRCOTI1MkRERTAwNTc2NkQ5RDlGMjc2NTY1RjYzRTIiLCJ4NXQiOiJWaldJVWpTNUpTM2VBRmRtMmRueWRsWmZZLUkiLCJ0eXAiOiJKV1QifQ.eyJvcmlnaW4iOiJodHRwczovL291dGxvb2subGl2ZS5jb20iLCJ2ZXIiOiJFeGNoYW5nZS5DYWxsYmFjay5WMSIsImFwcGN0eHNlbmRlciI6Ik93YURvd25sb2FkQDg0ZGY5ZTdmLWU5ZjYtNDBhZi1iNDM1LWFhYWFhYWFhYWFhYSIsImlzc3JpbmciOiJXVyIsImFwcGN0eCI6IntcIm1zZXhjaHByb3RcIjpcIm93YVwiLFwicHJpbWFyeXNpZFwiOlwiUy0xLTI4MjctMjEyOTkzLTQ1MjE4ODY4NlwiLFwicHVpZFwiOlwiOTE0Nzk4NDIxNDY1NjE0XCIsXCJvaWRcIjpcIjAwMDM0MDAxLTFhZjMtZGEwZS0wMDAwLTAwMDAwMDAwMDAwMFwiLFwic2NvcGVcIjpcIk93YURvd25sb2FkXCJ9IiwibmJmIjoxNTg3NzIyMjk5LCJleHAiOjE1ODc3MjI4OTksImlzcyI6IjAwMDAwMDAyLTAwMDAtMGZmMS1jZTAwLTAwMDAwMDAwMDAwMEA4NGRmOWU3Zi1lOWY2LTQwYWYtYjQzNS1hYWFhYWFhYWFhYWEiLCJhdWQiOiIwMDAwMDAwMi0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvYXR0YWNobWVudC5vdXRsb29rLmxpdmUubmV0QDg0ZGY5ZTdmLWU5ZjYtNDBhZi1iNDM1LWFhYWFhYWFhYWFhYSIsImhhcHAiOiJvd2EifQ.nE62tvQW0Eq-Hp0PUso5xNSs1tWoKv7QkZ00CkUwZKp2crlChrYbKtSxYJS6DtwnVbkvn8l3E4_sevDp_4rW7iQa3yTHFC-vxHSlsp9WVQU7su2LoWfkAdpY1PX4OYyES0tqu6vFySz28h836onIS9wq8db1vbQgLA9Z5ScavNds38w43cPo_EclGhrRnuOcIMfmRUhzYEquvscmWc33V_jW6ETd__ZLnCY6LV3s_oOy_IrdzWWQyoGbU_Zr-cFX_zCMTcdRzcHrTiIUEjjevyjbLt7RWEvyLAP9AJsVBH_su1o6fuG9g8xpVhex77_FXMcrT20d812xrx62R1_a4g&amp;animation=true" width="142" height="106" alt="https://logos.solvarea.nl/logo-klein.png" style="cursor: pointer;vertical-align: bottom;" crossorigin="use-credentials">
    </span>
    <span style="font-size:12.0pt; font-family:&quot;Times New Roman&quot;,serif">
    </span>
</p>

Я пытался добавить o: style = «вертикальное выравнивания: снизу;» но она отклоняется / игнорируется почтой Outlook Live.

Таким образом, предпочтительным результатом будет иметь стиль для v: shape, добавленный стиль вертикального выравнивания: format = "курсор: указатель; вертикальное выравнивание: дно;"

Как я могу добиться этого в моем html шаблоне, чтобы outlook live правильно воспринял вертикальное выравнивание?

Надеюсь, кто-то может помочь, эта проблема стоила мне уже 2 дня тестирования без результата

1 Ответ

0 голосов
/ 24 апреля 2020

Ну, если я понял, что вы хотите, чтобы само изображение оставалось внизу, вы можете попробовать применить свойство absolute к оболочке изображения (в данном случае, <span> tag) и установить на его стиль: bottom: 0;, поэтому контейнер с изображениями всегда будет оставаться внизу. 

<td width="106pt" height="80pt" valign="bottom" style="width:106pt; height:80pt; padding:0cm 0cm 0cm 0cm;overflow:hidden;">
<span style="position:absolute;bottom:0;">
        <img width="142pt" height="106pt" src="image_bestanden/logo-klein.png" u1:shapes="Afbeelding_x0020_7" v:shapes="_x0000_i1025" style="z-index:-9999999999;position:relative;width:106.5pt;height:79.5pt;left:0;right:0;top:0;bottom:0;border:none;padding:0;"><!--[endif]--><o:p></o:p>
</span>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...