0

我正在石蕊中测试一封 html 电子邮件。它在所有浏览器和客户端中都能完美呈现，除了 firefox、chrome 和 IE 上的 outlook.com。我得到了这些奇怪的边框，并且我的页面布局略有偏离。我的 A 标签也中断了 outlook.com。我是 html 电子邮件开发的新手，这让我很难过。任何帮助引导我走向正确方向的帮助表示赞赏。

这是它的外观

这是它在 outlook.com 中的呈现方式（firefiox、chrome、IE）

这是HTML：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <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>
<link rel="stylesheet" type="text/css" href="styles.css" />
<style type="text/css">

</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
    table {border-collapse: collapse;}
    .social span{
        padding: 5px;
    }
</style    <![endif]-->
</head>
<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 class="full-width-image">
                <img src="http://res.cloudinary.com/jet/image/upload/v1448299798/header-img_k75kme.jpg" width="600" alt="" />
                </td>
            </tr>
            <tr>
            <td class="three-column">
                <!--[if (gte mso 9)|(IE)]>
                <table width="100%">
                <tr>
                <td width="200" valign="top">
                <![endif]-->
                <table class="column">
                    <tr>
                        <td class="inner">
                            <table class="contents">
                                <tr>
                                    <td>
                                        <img src="http://res.cloudinary.com/jet/image/upload/v1448300038/shirts_hm4a61.jpg" width="180" alt="" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="btn-cell">
                                     <div><!--[if mso]>
                                      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:180px;" strokecolor="#a8a8a8" fillcolor="#ffffff">
                                        <w:anchorlock/>
                                        <center style="color:#a8a8a8;font-family:sans-serif;font-size:13px;font-weight:bold;">Shop Shirts</center>
                                      </v:rect>
                                    <![endif]--><a href="http://"
                                    style="background-color:#ffffff;border:1px solid #a8a8a8;color:#a8a8a8;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:180px;-webkit-text-size-adjust:none;mso-hide:all;">Shop Shirts</a></div>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <!--[if (gte mso 9)|(IE)]>
                </td><td width="200" valign="top">
                <![endif]-->
                <table class="column">
                    <tr>
                        <td class="inner">
                            <table class="contents">
                                <tr>
                                    <td>
                                        <img src="http://res.cloudinary.com/jet/image/upload/v1448300039/shoes_vhtq9j.jpg" width="180" alt="" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="btn-cell">
                                       <div><!--[if mso]>
                                          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:180px;" strokecolor="#a8a8a8" fillcolor="#ffffff">
                                            <w:anchorlock/>
                                            <center style="color:#a8a8a8;font-family:sans-serif;font-size:13px;font-weight:bold;">Shop Shoes</center>
                                          </v:rect>
                                        <![endif]--><a href="http://"
                                        style="background-color:#ffffff;border:1px solid #a8a8a8;color:#a8a8a8;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:180px;-webkit-text-size-adjust:none;mso-hide:all;">Shop Shoes</a></div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <!--[if (gte mso 9)|(IE)]>
                </td><td width="200" valign="top">
                <![endif]-->
                <table class="column">
                    <tr>
                        <td class="inner">
                            <table class="contents">
                                <tr>
                                    <td>
                                        <img src="http://res.cloudinary.com/jet/image/upload/v1448300039/accessories_dofp29.jpg" width="180" alt="" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="btn-cell">
                                        <div><!--[if mso]>
                                          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:180px;" strokecolor="#a8a8a8" fillcolor="#ffffff">
                                            <w:anchorlock/>
                                            <center style="color:#a8a8a8;font-family:sans-serif;font-size:13px;font-weight:bold;">Shop Accessories</center>
                                          </v:rect>
                                        <![endif]--><a href="http://"
                                        style="background-color:#ffffff;border:1px solid #A8A8A8;color:#A8A8A8;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:180px;-webkit-text-size-adjust:none;mso-hide:all;">Shop Accessories</a></div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
                <!--[if (gte mso 9)|(IE)]>
                </td>
                </tr>
                </table>
                <![endif]-->
            </td>
        </tr>
            <tr>
                <td class="one-column border">
                    <table width="100%">
                        <tr>
                            <td class="inner contents">
                                <p class="h1">Sign up now for weekly savings and deals</p>
                                <div class="signup-btn-div"><!--[if mso]>
                                  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#A8A8A8" fillcolor="#fff">
                                    <w:anchorlock/>
                                    <center style="color:#A8A8A8;font-family:sans-serif;font-size:13px;font-weight:bold;">Subscribe</center>
                                  </v:roundrect>
                                <![endif]--><a href="http://"
                                style="background-color:#fff;border:1px solid #A8A8A8;border-radius:4px;color:#A8A8A8;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">SUBSCRIBE!</a></div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td class="one-column">
                    <table width="100%">
                        <tr>
                            <td class="inner contents">
                                 <img src="http://res.cloudinary.com/jet/image/upload/v1448313217/footer-img_zku5c5.jpg" width="600" alt="" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
           <!--  <tr>
                <td class="full-width-image">
                <img src="http://res.cloudinary.com/jet/image/upload/v1448313217/footer-img_zku5c5.jpg" width="600" alt="" />
                </td>
            </tr> -->
            <tr>
                <td class="one-columns">
                    <table width="100%">
                        <tr>
                            <td class="inner contents">
                                <div class="social">
                                    <span><a href="#"><img src="http://res.cloudinary.com/jet/image/upload/v1448313211/fb-icon_bgjpcc.png"></a></span>
                                    <span><a href="#"><img src="http://res.cloudinary.com/jet/image/upload/v1448313215/youtube-icon_rqtuiv.png"></a></span>
                                    <span><a href="#"><img src="http://res.cloudinary.com/jet/image/upload/v1448313215/twitter-icon_v4s0vo.png"></a></span>
                                    <span><a href="#"><img src="http://res.cloudinary.com/jet/image/upload/v1448313214/ig-icon_qxk3sl.png"></a></span>
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td class="one-column">
                    <table width="100%">
                        <tr>
                            <td class="inner contents">
                                <div class="info">
                                    <span><a href="#">CONTACT US</a></span>
                                    <span><a href="#">DOWNLOAD OUR APP</a></span>
                                    <span><a href="#">HELP</a></span>
                                </div>
                            </td>
                        </tr>

                    </table>
                </td>
            </tr>
         </table>
        <!--[if (gte mso 9)|(IE)]>
        </td>
        </tr>
        </table>
        <![endif]-->
    </div>
</center>
</body>
</html>

这是CSS：

body {
    Margin: 0;
    padding: 0;
    min-width: 100%;
   background-color: #ffffff;
}
table {
    border-spacing: 0;
    font-family: Century Gothic, sans-serif;
    color: #333333;
}
td {
    padding: 0;
}
img {
    border: 0;
    /*removes space under images in outlook*/
}
.wrapper {
    width: 100%;
    table-layout: fixed;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
.webkit {
    max-width: 600px;
}

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

.full-width-image img {
     width: 100%;
     max-width: 600px;
     height: auto;
}

.inner {
    padding: 10px;
}

p {
    Margin: 0;
}

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

ul {
   list-style-type: none;
}

.social li {
   display: inline;
}
.input-div{
    text-align: center;
   Margin-left: auto;
   Margin-left: auto;
}
input[type="text"]{
   padding: 10px;
   line-height: 10px;
   width: 300px;
   text-align: center;
   Margin-left: auto;
   Margin-left: auto;
}

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

.h2 {
    font-size: 18px;
    font-weight: bold;
    Margin-bottom: 12px;
}

/* One column layout */
.one-column .contents {
    text-align: center;
}
.one-column p {
    font-size: 14px;
    Margin-bottom: 10px;
}

/*Styles for three column*/

.three-column {
    text-align: center;
    font-size: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}
.three-column .column {
    width: 100%;
    max-width: 200px;
    display: inline-block;
    vertical-align: top;
}
.three-column .contents {
    font-size: 14px;
    text-align: center;
}
.three-column img {
    width: 100%;
    max-width: 180px;
    height: auto;
}
.three-column .text {
    padding-top: 10px;
}



.btn-cell a {
    width: 180px;
    Margin-top: 10px;
}

.signup-btn-div {
   padding-top: 10px;
   text-align: center;
   Margin-left: auto;
   Margin-left: auto;
}

.border {
  border-top: solid 1px lightgray;
  border-bottom: solid 1px lightgray;
}



.footer-img {
   padding-top: 10px;
}

.info span{
  font-size: 12px;
  padding-left: 6px;
  padding-right: 6px;
}

.social{
   text-align: center;
}
4

0 回答 0