个人中心
gpt4 book ai didi

html - Outlook 2007+ 单列行的额外间距

转载 作者：行者123 更新时间：2023-11-28 04:47:30 25 4
gpt4 key购买 nike

我正在构建一个流畅的混合电子邮件，出于某种原因，这个单列不断扩展到我的 600 像素 Outlook 2007+ 容器之外。当我在 Litmus 中测试它时，一切都很好，但是当我在 Outlook 2010 中实际查看它时，我遇到了一些问题。标题图片下方有 1px 的间距，单列(带有文本)扩展到 600px 以上。我尝试了通常的嫌疑人(显示:阻止 img，valign 底部)但没有运气。

Here's my litmus build

请注意，我有一个针对 Outlook 2007+ 显示的条件标题图像。

有什么想法吗？提前致谢!

代码如下: 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
    table {border-collapse: collapse;}
    .legal {padding-left: 20px;}
.footer {display: none !important;}
</style>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.header {display: none;}
</style>
<![endif]-->
<style type="text/css">
     .sellPoints {
    font-size: 10px;
    padding-bottom: 5px;
    padding-left: 42px;
}
.mainPoints {
    font-size: 12px;
}
body {
    margin: 0 !important;
    padding: 0;
    background-color: #ffffff;
}

table {
    border-spacing: 0;
    font-family: sans-serif;
    color: #333333;
}

td {
    padding: 0;
}

img {
    border: 0;
}

div[style*="margin: 16px 0"] {
    margin: 0 !important;
}

.wrapper {
    width: 100%;
    table-layout: fixed;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

.webkit {
    max-width: 600px;
    margin: 0 auto;
}

.outer {
    Margin: 0 auto;
    width: 100%;
    max-width: 600px;
}
/*Full width image*/

.full-width-image img {
    width: 100%;
    max-width: 600px;
    height: auto;
}
/*<!-- Single column row layout -->*/

.inner {
    padding: 10px;
}

p {
    Margin: 0;
}

a {
    color: #ee6a56;
    text-decoration: underline;
}

.h1 {
    font-size: 21px;
    font-weight: bold;
    Margin-bottom: 18px;
}

.h2 {
    font-size: 18px;
    font-weight: bold;
    Margin-bottom: 12px;
}
/* One column layout */

.one-column .contents {
    text-align: left;
}

.one-column p {
    font-size: 14px;
    Margin-bottom: 10px;
}
/*Double column row layout*/

.two-column {
    text-align: center;
    font-size: 0;
}

.two-column .column {
    width: 100%;
    max-width: 300px;
    display: inline-block;
    vertical-align: top;
}

.contents {
    width: 100%;
}

.two-column .contents {
    font-size: 14px;
    text-align: left;
}

.two-column img {
    width: 100%;
    max-width: 300px;
    height: auto;
}

.two-column .text {
    padding-top: 10px;
}
</style>

<body>
<center class="wrapper">
    <div class="webkit">
        <!--[if (gte mso 9)|(IE)]>
        <table width="600" align="center">
        <tr>
        <td>
        <![endif]-->
        <table class="outer" align="center">
            <tr>
                <td>
                    <!-- Two column row layout -->

                        <!-- Full width banner image -->
                     <!--[if gte mso 9]>
                    <table class="outer" align="center">
                        <tr>
                            <td class="full-width-image" valign="bottom">
                                <img style="display: block; width: 600px !important;" src="http://www.thedognamer.com/wp-content/uploads/2015/07/seinfeld-dog-names.png" width="600" alt="" />
                            </td>
                        </tr>
                    </table>
                    <![endif]-->
                    <!-- End Full width banner image -->


                    <!--[if !mso]><!-- -->
                    <tr>
                        <td class="two-column header" bgcolor="#83bae6" style="background-color: #83bae6;">
                            <!--[if (gte mso 9)|(IE)]>
                                    <table width="100%" cellspacing="0" cellpadding="0">
                                    <tr>
                                    <td width="50%" valign="top">
                                    <![endif]-->
                            <div class="column">
                                <table width="100%" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td>
                                            <table class="contents" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td align="center">
                                                        <img style="display: block;" src="https://s-media-cache-ak0.pinimg.com/736x/03/a8/68/03a868689a6c3eb81767e18ee246ebfe.jpg" alt="" />
                                                    </td>
                                                </tr>                                                   
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <!--[if (gte mso 9)|(IE)]>
                                    </td><td width="50%" valign="top">
                                    <![endif]-->
                            <div class="column">
                                <table width="100%" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td>
                                            <table class="contents" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td align="center">
                                                        <img style="display: block;" src="https://s-media-cache-ak0.pinimg.com/736x/03/a8/68/03a868689a6c3eb81767e18ee246ebfe.jpg" alt="" />
                                                    </td>
                                                </tr>                                                    
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <!--[if (gte mso 9)|(IE)]>
                                    </td>
                                    </tr>
                                    </table>
                                    <![endif]-->
                        </td>
                    </tr>
                    <!--<![endif]-->
                    <!-- End Two column row layout -->  
                    <!-- Single column row layout -->
                    <tr>
                        <td class="one-column">
                            <table width="100%" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td class="contents" bgcolor="#5477b9" style="background-color: #5477b9;text-align: center;color: #ffffff;padding-top: 8px; padding-bottom: 0; Margin-bottom: 8px;">
                                        <p class="h1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient mo</p>                                            
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <!-- End Single column row layout -->     
                </td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        </table>
        <![endif]-->
    </div>
</center>

最佳答案

有时使用 HTML 电子邮件您会忘记最简单的事情...

通过将 border="0"添加到包含图像的表中，问题就消失了。

关于html - Outlook 2007+ 单列行的额外间距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40868965/

25 4 0
文章推荐： html - 空白 : Nowrap float issue
文章推荐： javascript - 使用innerHTML的Firefox内容可编辑问题
文章推荐： javascript - amcharts 中导出到图像错误，导出图片中存在间隙
文章推荐： css - Flying Saucer/iText PDF 找不到 css 文件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com