0

我遇到了一个令人沮丧的问题,没有真正的方法来找到解决方案......

我正在编写 HTML 电子邮件,并且我有一个特定的表格,该表格一直延伸到浏览器的末尾。我在(所有浏览器、Yahoo、Gmail、Outlook Mac 2011)中测试过的所有东西都没有做类似的事情。我收到了来自收件人的屏幕截图,尽管那很不正常。当我尝试的所有东西看起来都很好时,我不确定如何解决这个问题......

不正确:

正确的:

正如您在屏幕截图中看到的那样,中心列在它旁边的两列之间尽可能地扩展。在正确的屏幕截图中,您将看到它应该如何实际出现。

如果有人能给我一些方向,将不胜感激。

<!--Container-->
<table cellpadding="0px" cellspacing="0px" width="600px" style="margin:0px auto;border:0px;border-spacing:0px;border-collapse:collapse;display:block;background-color:#1a223e;">
    <tr>
            <td style="vertical-align:top;">

<!--Left Column-->
<table width="227px" cellpadding="0px" cellspacing="0px" style="border:0px;border-spacing:0px;border-collapse:collapse;margin:0px auto;display:block;padding:0px;">
                            <tr>
                                    <td><a href="http://pesgm13.org/index1.asp?camp=TDGMEM2" style="border:0px;"><img src="left_image.jpg" width="227" height="932" style="display:block;border:0px;border-spacing:0px;border-collapse:collapse;vertical-align:top;background-color:#1a223e;" /></a></td>
                            </tr>
                    </table>
            </td>




    <td style="vertical-align:top;">  

            <!--Content-->
            <table width="340px" cellpadding="0px" cellspacing="0px" style="border:0px;border-spacing:0px;border-collapse:collapse;margin:0px auto;display:block;vertical-align:top;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:16px;font-weight:normal;color:#1a1a1a;background-color:#ffffff;">
                            <tr>
                                    <td style="vertical-align:top;display:block;">

                                    <img src="headline.jpg" width="271" height="85" style="display:block;margin:0px auto;border:0px;border-spacing:0px;border-collapse:collapse;background-color:#ffffff;margin-bottom:20px;padding-top:25px;" />
4

2 回答 2

0

当您编写电子邮件模板时,总是喜欢设置 <td width="600"> instead of <table width="600">set width for each <td>它会好的,如果它不起作用,请告诉我

于 2013-04-23T21:18:01.887 回答
0

当使用不推荐使用的widthheight属性而不是 CSS 时,您需要遵守它们的语义。属性采用数字值(表示像素)或百分比后跟 a%作为值。所以:

<table width="600">      <!-- correct -->
<table width="60%">      <!-- correct -->    
<table width="600px">    <!-- invalid attribute value! -->

大多数 HTML 渲染器对此并不真正迂腐,但您的客户似乎找到了一个。我很确定将其更改为width="600"将解决您的问题。

您实际上可以在不正确的屏幕截图中看到这是解决方案,因为它也忽略了您的cellspacing声明,将它们默认为正常值,1因为它们px包含在内。请注意,即使在 CSS 中,这也被认为是不好的形式 -0根本没有尺寸,因此没有单位来衡量它,所以在 CSS 中你也应该总是写0而不是0px,0em0%

于 2013-04-23T21:17:22.350 回答