如何在Outlook应用程序中使用IMG标签删除轮廓
我对Outlook应用程序有问题。 一条细线显示在IMG标签上方和下方。我已经突出了 屏幕截图中的线。
我已经连接了突出显示细线的屏幕截图。
请让我知道建议的修复程序。 先感谢您。
@media only screen and (max-width: 639px) {
.st-title-wrapper {
padding-left: 50px !important;
padding-right: 50px !important;
}
.st-title {
font-size: 24px !important;
line-height: 22px !important;
}
.st-desc {
font-size: 16px !important;
line-height: 18px !important;
}
.footer-links {
padding-left: 20px !important;
}
.footer-link-single {
padding: 8px 5px !important;
}
.footer-link-single a {
font-size: 14px !important;
}
.footer-link-top {
height: 30px !important;
}
.footer-link-bottom {
height: 30px !important;
}
.footer-social {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.footer-logo {
width: 125px !important;
}
.footer-logo img {
width: 125px !important;
}
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Email template</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;700&display=swap" rel="stylesheet" />
<meta name="x-apple-disable-message-reformatting" />
<!--[if gt mso 15]>
<style type="text/css" media="all">
/* Outlook 2016 Height Fix */
table,
tr,
td {
border-collapse: collapse;
}
tr {
font-size: 0px;
line-height: 0px;
border-collapse: collapse;
}
</style>
<![endif]-->
</head>
<body style="margin: 0">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td style="max-width: 100%; width: 840px">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse">
<tbody>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse">
<tbody>
<tr>
<td align="center" style="background-color: #000">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse">
<tbody>
<tr>
<td></td>
<td style="width: 360px; text-align: center" class="st-title-wrapper">
<font style="
color: #e4002b;
font-family: 'Oswald', Arial, sans-serif;
font-weight: 600;
font-size: 32px;
line-height: 28px;
" class="st-title">Lorem Ipsum is simply dummy text of the
</font>
</td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#e6e6e6">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse">
<tr>
<td>
<img src="https://rahulshahui.github.io/pwa/images/shape-top.png" width="100%" style="display: block" />
</td>
</tr>
<tr>
<td align="center" style="padding: 13px 20px">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse">
<tbody>
<tr>
<td></td>
<td width="550" style="text-align: center">
<font style="
color: #1a1a1a;
text-align: center;
font-family: Arial, sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 20px;
" class="st-desc">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
College in Virginia.
</font>
</td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<img src="https://rahulshahui.github.io/pwa/images/shape-bottom.png" width="100%" style="display: block" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color: #000">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="
border-collapse: collapse;
border-spacing: 0px;
">
<tbody>
<tr>
<td align="" class="footer-links" style="padding-left: 80px">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="240" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="" valign="middle" style="padding: 8px 0" class="footer-link-single">
<a href="https://www.google.com/" style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
">Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
</table>
</td>
<td width="210" valign="top">
<table
border="0"
cellpadding="0"
cellspacing="0"
>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
align="center"
style="
border-collapse: collapse;
border-spacing: 0px;
"
>
<tr>
<td
colspan="3"
height="60"
class="footer-link-bottom"
></td>
</tr>
<tr>
<td
align="center"
style="
padding-left: 42px;
padding-right: 42px;
"
>
<table
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
align="center"
style="
border-collapse: collapse;
border-spacing: 0px;
"
>
<tr>
<td
height="1"
style="background-color: #fff"
></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="right" colspan="3">
<table
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
align="center"
style="
border-collapse: collapse;
border-spacing: 0px;
"
>
<tr>
<td
align="right"
class="footer-social"
style="
padding-top: 62px;
padding-bottom: 62px;
"
>
<table
border="0"
cellspacing="0"
cellpadding="0"
align="center"
style="
border-collapse: collapse;
border-spacing: 0px;
"
>
<tbody>
<tr>
<td
align="center"
valign="middle"
style="
padding-left: 8px;
padding-right: 8px;
"
>
<a
href="https://www.google.com/"
>
<img
src="https://rahulshahui.github.io/pwa/images/FB-icon.png"
/>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>[下面是代码链接] [2]
[2]: https://codepen.io/rahulFront/pen/oNpPvgZ
I'm having an issue with the outlook application.
One thin line shows above and below the img tag. I have highlighted
the line in the screenshot.
I have attached the screenshot in which the thin line is highlighted.
Please let me know the suggested fix.
Thank you in advance.
@media only screen and (max-width: 639px) {
.st-title-wrapper {
padding-left: 50px !important;
padding-right: 50px !important;
}
.st-title {
font-size: 24px !important;
line-height: 22px !important;
}
.st-desc {
font-size: 16px !important;
line-height: 18px !important;
}
.footer-links {
padding-left: 20px !important;
}
.footer-link-single {
padding: 8px 5px !important;
}
.footer-link-single a {
font-size: 14px !important;
}
.footer-link-top {
height: 30px !important;
}
.footer-link-bottom {
height: 30px !important;
}
.footer-social {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.footer-logo {
width: 125px !important;
}
.footer-logo img {
width: 125px !important;
}
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Email template</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;700&display=swap" rel="stylesheet" />
<meta name="x-apple-disable-message-reformatting" />
<!--[if gt mso 15]>
<style type="text/css" media="all">
/* Outlook 2016 Height Fix */
table,
tr,
td {
border-collapse: collapse;
}
tr {
font-size: 0px;
line-height: 0px;
border-collapse: collapse;
}
</style>
<![endif]-->
</head>
<body style="margin: 0">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td style="max-width: 100%; width: 840px">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse">
<tbody>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse">
<tbody>
<tr>
<td align="center" style="background-color: #000">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse">
<tbody>
<tr>
<td></td>
<td style="width: 360px; text-align: center" class="st-title-wrapper">
<font style="
color: #e4002b;
font-family: 'Oswald', Arial, sans-serif;
font-weight: 600;
font-size: 32px;
line-height: 28px;
" class="st-title">Lorem Ipsum is simply dummy text of the
</font>
</td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#e6e6e6">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse">
<tr>
<td>
<img src="https://rahulshahui.github.io/pwa/images/shape-top.png" width="100%" style="display: block" />
</td>
</tr>
<tr>
<td align="center" style="padding: 13px 20px">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse: collapse">
<tbody>
<tr>
<td></td>
<td width="550" style="text-align: center">
<font style="
color: #1a1a1a;
text-align: center;
font-family: Arial, sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 20px;
" class="st-desc">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
College in Virginia.
</font>
</td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<img src="https://rahulshahui.github.io/pwa/images/shape-bottom.png" width="100%" style="display: block" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color: #000">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="
border-collapse: collapse;
border-spacing: 0px;
">
<tbody>
<tr>
<td align="" class="footer-links" style="padding-left: 80px">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="240" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="" valign="middle" style="padding: 8px 0" class="footer-link-single">
<a href="https://www.google.com/" style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
">Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
</table>
</td>
<td width="210" valign="top">
<table
border="0"
cellpadding="0"
cellspacing="0"
>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
<tr>
<td
align=""
valign="middle"
style="padding: 8px 0"
class="footer-link-single"
>
<a
href="https://www.google.com/"
style="
color: #fff;
text-decoration: none;
font-family: Arial,
sans-serif;
font-size: 16px;
"
>Link</a
>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
align="center"
style="
border-collapse: collapse;
border-spacing: 0px;
"
>
<tr>
<td
colspan="3"
height="60"
class="footer-link-bottom"
></td>
</tr>
<tr>
<td
align="center"
style="
padding-left: 42px;
padding-right: 42px;
"
>
<table
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
align="center"
style="
border-collapse: collapse;
border-spacing: 0px;
"
>
<tr>
<td
height="1"
style="background-color: #fff"
></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="right" colspan="3">
<table
width="100%"
border="0"
cellspacing="0"
cellpadding="0"
align="center"
style="
border-collapse: collapse;
border-spacing: 0px;
"
>
<tr>
<td
align="right"
class="footer-social"
style="
padding-top: 62px;
padding-bottom: 62px;
"
>
<table
border="0"
cellspacing="0"
cellpadding="0"
align="center"
style="
border-collapse: collapse;
border-spacing: 0px;
"
>
<tbody>
<tr>
<td
align="center"
valign="middle"
style="
padding-left: 8px;
padding-right: 8px;
"
>
<a
href="https://www.google.com/"
>
<img
src="https://rahulshahui.github.io/pwa/images/FB-icon.png"
/>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>[Below is the code link][2]
[2]: https://codepen.io/rahulFront/pen/oNpPvgZ
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这看起来像是边界。
尝试将
border-width：0;添加到图像，例如：＆lt; img src =“ https://rahulshahui.githui.github.io/pwa/pwa/images/shape-bottom.png” width =“ 100％”样式=“显示：块；边框宽度：0;” /＆gt;This looks like a border.
Try adding
border-width:0;to the images, e.g.:<img src="https://rahulshahui.github.io/pwa/images/shape-bottom.png" width="100%" style="display: block;border-width:0;" />