当前位置：文江博客话题详情

HTML：无法对齐图像和文本

发布于 2025-01-08 09:19:19 字数 1644 浏览 6 评论 0原文

我必须构建一个签名，我做了一些测试，在浏览器中看起来还不错。但在 Windows Live Mail 和 Outlook 2010 中则不然，它们对 HTML 的解释似乎彼此不同。

以下是我的问题的一些示例：

GMail：在此处输入图像描述

Outlook 2010：在此处输入图像描述

Windows Live Mail：在此处输入图像描述

如您所见，我无法对齐图像（在 Outlook 和 Windows Live Mail 中）右侧的文本按照 GMail 图像中的样子显示。

这是我的代码：

<hr>
<p style="color: gray;">
    <tr>
        <td>
            <a href="#"> <img src="file:///C:/images/logo.jpg" align="left" border="0"> </a>
        </td>

        <td>
            <b>Valter Henrique</b> <br>
            skype: valter_brain_set</br>
            email: <a href="#" style="text-decoration: none;color: #0056A2; ;">[email protected]</a></br>
            fones: <b>11. 2094 6999<b> | 15. 9122 1822 
        </td>
    </tr>
</p>
<p style="padding-left:15px;">
    <font size=2 style="color: gray;">
        <a href="#" style="text-decoration: none;color: gray;">
            rua cel. irineu de castro, 188 - SP 
        </a> 
        <b>11. 2094 6999 </b> 
        <a href="#" style="text-decoration: none;color: gray">
            brainset.com.br
        </a>
    </font>
</p>

似乎每个电子邮件阅读器对 HTML 的解释都非常不同。有办法解决这个问题吗？

原文

I have to build a signature, I made some test and it seems pretty okay in the browser.
But not in Windows Live Mail and Outlook 2010, it seems they interpretated HTML different from each other.

Here are some examples of my problem:

GMail:
enter image description here

Outlook 2010:
enter image description here

Windows Live Mail:
enter image description here

As you can see, I wasn't able to align the image (in Outlook and Windows Live Mail) with the text in the right to show as it should like in GMail image.

This is my code :

<hr>
<p style="color: gray;">
    <tr>
        <td>
            <a href="#"> <img src="file:///C:/images/logo.jpg" align="left" border="0"> </a>
        </td>

        <td>
            <b>Valter Henrique</b> <br>
            skype: valter_brain_set</br>
            email: <a href="#" style="text-decoration: none;color: #0056A2; ;">[email protected]</a></br>
            fones: <b>11. 2094 6999<b> | 15. 9122 1822 
        </td>
    </tr>
</p>
<p style="padding-left:15px;">
    <font size=2 style="color: gray;">
        <a href="#" style="text-decoration: none;color: gray;">
            rua cel. irineu de castro, 188 - SP 
        </a> 
        <b>11. 2094 6999 </b> 
        <a href="#" style="text-decoration: none;color: gray">
            brainset.com.br
        </a>
    </font>
</p>

It seems that each email reader interpret the HTML pretty different from each other.
There's some way to fix this ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

差↓一点笑了 2025-01-15 09:19:19

最后这是我的签名（谢谢大家的支持）：

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=iso-8859-1">
<HTML>
    <HEAD></HEAD>
<BODY dir=ltr>
    <DIV dir=ltr>
        <DIV style="FONT-FAMILY: 'Arial'; COLOR: #000000; FONT-SIZE: 10pt">
            <DIV> </DIV>
            <DIV style="FONT-FAMILY: 'Arial'; COLOR: #000000; FONT-SIZE: 10pt">
                <STYLE type=text/css>
                    img{
                        border: 0;
                    }
                </STYLE>

                <DIV style="FLOAT: left">
                    <HR>

                    <TABLE style="COLOR: #000000">
                        <TBODY>
                            <TR>
                                <TD>
                                    <A href="http://www.brainset.com.br">
                                        <IMG style="BACKGROUND-IMAGE: none; BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: inline; FLOAT: left; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 0px" title=logo border=0 alt=logo align=left src="file:///C:/BRAINSET/Email/assinatura/bs_innovo/valter_henrique/images/logo.jpg" width=156 height=76> 
                                    </A>
                                </TD>

                                <TD>
                                    <FONT size=2>
                                        <B>Valter Henrique</B> <BR>
                                        <FONT color=#666666>skype: valter_brain_set<BR>email: </FONT>
                                    </FONT>
                                    <A  style="COLOR: #0056a2; TEXT-DECORATION: none" href="mailto:[email protected]">
                                        <FONT color=#666666 size=2>[email protected]</FONT>
                                    </A>
                                    <BR>
                                    <FONT color=#666666>
                                        <FONT size=2>fones: 11. 2094-6999 | 15. 9122-1822</FONT> 
                                    </FONT>
                                </TD>
                            </TR>
                        </TBODY>
                    </TABLE>
                    <BR>
                    <STRONG>     </STRONG>
                    <A style="COLOR: gray; TEXT-DECORATION: none" href="http://g.co/maps/upbwq">rua cel. irineu de castro, 188 - SP </A>
                    <B><FONT color=#0056A2>11. 2094 6999 </FONT><FONT color=#666666>|</FONT> </B>
                    <A style=" TEXT-DECORATION: none" href="http://www.brainset.com.br">
                        <FONT color=#0056A2>brainset.com.br</FONT> 
                    </A>
                </DIV>
            </DIV>
        </DIV>
    </DIV>
</BODY>
</HTML>

In the end this is my signature as I wish (thank you guys for the support):

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=iso-8859-1">
<HTML>
    <HEAD></HEAD>
<BODY dir=ltr>
    <DIV dir=ltr>
        <DIV style="FONT-FAMILY: 'Arial'; COLOR: #000000; FONT-SIZE: 10pt">
            <DIV> </DIV>
            <DIV style="FONT-FAMILY: 'Arial'; COLOR: #000000; FONT-SIZE: 10pt">
                <STYLE type=text/css>
                    img{
                        border: 0;
                    }
                </STYLE>

                <DIV style="FLOAT: left">
                    <HR>

                    <TABLE style="COLOR: #000000">
                        <TBODY>
                            <TR>
                                <TD>
                                    <A href="http://www.brainset.com.br">
                                        <IMG style="BACKGROUND-IMAGE: none; BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: inline; FLOAT: left; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 0px" title=logo border=0 alt=logo align=left src="file:///C:/BRAINSET/Email/assinatura/bs_innovo/valter_henrique/images/logo.jpg" width=156 height=76> 
                                    </A>
                                </TD>

                                <TD>
                                    <FONT size=2>
                                        <B>Valter Henrique</B> <BR>
                                        <FONT color=#666666>skype: valter_brain_set<BR>email: </FONT>
                                    </FONT>
                                    <A  style="COLOR: #0056a2; TEXT-DECORATION: none" href="mailto:[email protected]">
                                        <FONT color=#666666 size=2>[email protected]</FONT>
                                    </A>
                                    <BR>
                                    <FONT color=#666666>
                                        <FONT size=2>fones: 11. 2094-6999 | 15. 9122-1822</FONT> 
                                    </FONT>
                                </TD>
                            </TR>
                        </TBODY>
                    </TABLE>
                    <BR>
                    <STRONG>     </STRONG>
                    <A style="COLOR: gray; TEXT-DECORATION: none" href="http://g.co/maps/upbwq">rua cel. irineu de castro, 188 - SP </A>
                    <B><FONT color=#0056A2>11. 2094 6999 </FONT><FONT color=#666666>|</FONT> </B>
                    <A style=" TEXT-DECORATION: none" href="http://www.brainset.com.br">
                        <FONT color=#0056A2>brainset.com.br</FONT> 
                    </A>
                </DIV>
            </DIV>
        </DIV>
    </DIV>
</BODY>
</HTML>

回复收藏 0 原文