个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在创建响应式电子邮件模板。
并且我想给白色内容区域border-radius: 5px;。 border-radius 在表格的底 Angular 起作用，但不会显示在顶 Angular 。
有什么想法吗？
这是一个代码笔，可以更容易地看到正在运行的模板: https://codepen.io/thecashbag/pen/jLyQoa
附言这是一个电子邮件模板。不熟悉电子邮件的 Web 设计人员会讨厌这种基于表格的代码，但它是电子邮件客户端正确显示所必需的。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Web Font / @font-face : BEGIN -->
<!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. -->
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> -->
<!--<![endif]-->
<!-- Web Font / @font-face : END -->
<!-- CSS Reset -->
<style>
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: A work-around for email clients meddling in triggered links. */
*[x-apple-data-detectors], /* iOS */
.x-gmail-data-detectors, /* Gmail */
.x-gmail-data-detectors *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
/*color: inherit !important;*/
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display:none !important;
}
/* What it does: Prevents underlining the button text in Windows 10 */
.button-link {
text-decoration: none !important;
}
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
/* Create one of these media queries for each additional viewport size you'd like to fix */
/* Thanks to Eric Lepetit @ericlepetitsf) for help troubleshooting */
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}
</style>
<!-- Progressive Enhancements -->
<style>
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #555555 !important;
border-color: #555555 !important;
}
/* Media Queries */
@media screen and (max-width: 480px) {
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
/* What it does: Adjust typography on small screens to improve readability */
.email-container p {
font-size: 17px !important;
line-height: 22px !important;
}
/* What it does: Adjusts reduces padding on discount boxes; */
.discount-outside {
padding: 10px !important;
}
.discount-td-first {
padding: 30px 10px 10px 10px !important;
}
.discount-td-middle {
padding: 10px 30px !important;
}
.discount-td-last {
padding: 10px 10px 30px 10px !important;
}
}
</style>
<!-- What it does: Makes background images in 72ppi Outlook render at correct size. -->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body width="100%" bgcolor="#f6f6f6" style="margin: 0; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #f6f6f6; text-align: left;">
<!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">
(Optional) This text will appear in the inbox preview, but not the email body.
</div>
<!-- Visually Hidden Preheader Text : END -->
<!--
Set the email width. Defined in two places:
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 680px.
2. MSO tags for Desktop Windows Outlook enforce a 680px width.
Note: The Fluid and Responsive templates have a different width (600px). The hybrid grid is more "fragile", and I've found that 680px is a good width. Change with caution.
-->
<div style="max-width: 680px; margin: auto;" class="email-container">
<!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
<tr>
<td>
<![endif]-->
<!-- Email Header : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<tr>
<td style="padding: 20px 0; text-align: center">
<img src="https://elementpaints.com/wp-content/uploads/2017/07/Element-db3236-transparent-200x42.png" width="200" height="42" alt="Element Paints - Enable images to view" border="0" style="height: auto; background: #f6f6f6; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #f6f6f6;">
</td>
</tr>
</table>
<!-- Email Header : END -->
<!-- Email Body : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px; border-radius: 5px;" class="email-container" bgcolor="#ffffff">
<!-- 1 Column Text : BEGIN -->
<tr>
<td bgcolor="#ffffff">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
<p style="margin: 0 0 10px 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text : END -->
<!-- 3 Even Columns : BEGIN -->
<tr>
<td bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%" style="padding: 10px 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="660">
<tr>
<td align="center" valign="top" width="660">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:660px;">
<tr>
<td align="center" valign="top" style="font-size:0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="660">
<tr>
<td align="left" valign="top" width="220">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; max-width:33.33%; min-width:220px; vertical-align:top; width:100%;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px 10px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: center;">
<tr>
<td>
<img src="https://elementpaints.com/wp-content/uploads/2017/02/Paint-brush-80x80.png" width="80" height="" border="0" alt="Soft Buttery Texture Image" class="center-on-narrow" style="width: 100%; max-width: 80px; height: auto; background: #ffffff; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #ffffff;">
</td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding-top: 10px;" class="stack-column-center">
<h3>Soft Buttery Texture</h3>
<p style="margin: 0 0 10px 0;">Feels great on the brush, always a pleasure to work with.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="220">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; max-width:33.33%; min-width:220px; vertical-align:top; width:100%;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px 10px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px; text-align: center;">
<tr>
<td>
<img src="https://elementpaints.com/wp-content/uploads/2017/02/Color-Plate-80x80.png" width="80" height="" border="0" alt="Heavy Pigment Load Image" class="center-on-narrow" style="width: 100%; max-width: 80px; height: auto; background: #ffffff; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #ffffff;">
</td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding-top: 10px;" class="stack-column-center">
<h3>Heavy Pigment Loads</h3>
<p style="margin: 0 0 10px 0;">Optimal pigment ratios give you rich vivid colors, and the best coverage.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="220">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; max-width:33.33%; min-width:220px; vertical-align:top; width:100%;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 10px 10px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px; text-align: center;">
<tr>
<td>
<img src="https://elementpaints.com/wp-content/uploads/2017/02/Picture-icon-80x81.png" width="80" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 80px; height: auto; background: #ffffff; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #ffffff;">
</td>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding-top: 10px;" class="stack-column-center">
<h3>Lightfast Colors</h3>
<p style="margin: 0 0 10px 0;">Strong permanent colors stop your painting from fading over time.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- 3 Even Columns : END -->
<!-- DISCOUNT 1 COLUMN : BEGIN -->
<tr>
<td bgcolor="#ffffff" class="discount-outside" style="padding: 10px 40px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="border: 8px dashed #cccccc; text-align: center;">
<tr>
<td class="discount-td-first" style="padding: 30px 30px 10px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
<h1>heading</h1>
</td>
</tr>
<tr>
<td class="discount-td-middle" style="padding: 0 30px 10px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
<p style="margin: 0 0 10px 0;">text:</p>
</td>
</tr>
<tr>
<td class="discount-td-middle" style="padding: 0 30px 10px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
<h2>XXX-CODE-GOES-HERE-XXX</h2>
</td>
</tr>
<tr>
<td class="discount-td-last" style="padding: 0 30px 30px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
<!-- Button : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td">
<a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
<span style="color:#ffffff;" class="button-link"> A Button </span>
</a>
</td>
</tr>
</table>
<!-- Button : END -->
</td>
</tr>
</table>
</td>
</tr>
<!-- DUSCOUNT 1 COLUMN : END -->
<!-- Clear Spacer : BEGIN -->
<tr>
<td aria-hidden="true" height="30" style="font-size: 0; line-height: 0;">
</td>
</tr>
<!-- Clear Spacer : END -->
</table>
<!-- Email Body : END -->
<!-- Email Footer : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 680px;">
<tr>
<td style="padding: 40px 10px 10px; width: 100%; font-size: 12px; font-family: sans-serif; line-height:18px; text-align: center; color: #cccccc;" class="x-gmail-data-detectors">
<a href="%WEBCOPY%" style="color:#cccccc; text-decoration:underline; font-weight: bold;">View as a Web Page</a>
<br><br>
%SENDER-INFO-SINGLELINE%
<br>
<a href="%UNSUBSCRIBELINK%" style="color:#cccccc; text-decoration:underline;">unsubscribe</a>
</td>
</tr>
</table>
<!-- Email Footer : END -->
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>最佳答案
将 style="background:none"添加到“1 列文本”部分中的第一个。这应该做你想做的。
<!-- 1 Column Text : BEGIN -->
<tr>
<td bgcolor="#ffffff" style="background:none">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 40px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555;">
<p style="margin: 0 0 10px 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- 1 Column Text : END -->
关于html - Border-radius 没有显示在我的电子邮件表上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45543150/
24
4
0
我正在尝试实现 RADIUS 协议(protocol)。根据 RFC 2866，对于 RADIUS 记帐，在计算 Authenticator 字段时，这些步骤如下: The Authenticator
有一台pptp服务器，我使用radius服务器进行认证。有时 vpn 客户端不明原因离线，因此 radius 无法清除客户端的 session 。 我想用radius client运行一个进程来监控c
struct circle { int center; int radius; }; struct circle *cir; cir.center cir->radius (cir.rad
IE9、Firefox 4、Opera 10.5、Safari 5、Chrome 4、WebKit 532.5 支持 CSS3 border-radius。 最新的 jquerycurvycorner
环境: Radius 服务器:FreeRadius Radius 客户端:TinyRadius 我正在我们的组织中设置 RADIUS 服务器。我想保护我的 RADIUS 服务器，以便客户端需要提供两件
我继承了一个应该在 IE8 中工作的 Web 元素(以及其他浏览器，但相比之下我并不担心它们)。当我在 Firefox 中运行该网站并检查它提到的错误控制台时: “警告:未知属性‘-moz-borde
我是 Threejs 的新手。我试图用不同的方式画一个肘部 begin_radius和 end_radius沿着带有 curve_radius 的曲线路径和一个 angle ，却无法取得成果。 Cyl
有什么方法可以在 CSS 验证器中验证 -moz-border-radius/-webkit-border-radius 吗？ 客户想要侧边栏中的验证按钮(呃!)，但我找不到任何绕过它的方法。我也使用
我的 Captiveportal 显示出非常奇怪的行为。 偶尔(5-6 天内 2-3 次)它会返回有关耗尽允许内存大小的标准 php 错误。日志显示此时 FreeRadius 没有应答 Error s
Edit1: Span code in the code and it's style are not needed, i just added them to show, where my bord
这个问题不太可能帮助任何 future 的访问者；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关，这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用，visit
基本上我想知道 Microsoft、LinkedIn 和其他人所指的渲染性能差异是在 0px 和 1px 之间还是在 1px 到无穷大 px 之间。 最佳答案 看看this article ，它没有回
谁能澄清为什么添加 padding-top 似乎会导致浏览器忽略 border-radius 属性？ 您可以通过从样式属性中删除/添加填充来进行快速测试，注意如何使用填充，忽略边框半径。 这是一个错
我正在研究在 iOS 的 UIWebView 中使用的一些 CSS。我可以使用 border-radius 属性在 iOS 6 中将 div 的 Angular 变圆，但我无法使用 border-ra
这是数学高手的数学/几何问题(不是我最擅长的科目)。这是针对 WPF 的，但应该足够通用以解决问题: 我有两个嵌入的 Border 元素，外部元素具有特定的角半径 R 和边框厚度 T。给定这两个值，内
我有这个 HTML 代码: 还有这个 CSS: .categoryButton { position:
我正在使用 cakephp 并想为某些部分的圆 Angular 做 css border-radius。它适用于除 IE 之外的所有其他浏览器。我现在指的是链接 http://www.htmlremi
我在按钮上遇到 border-top-left-radius 和 border-bottom-left-radius 的问题，这似乎在开发构建中有效，但在生产。当我运行 ng serve 时，我得到了
我一直在寻找 acctinputoctets 或 acctoutputoctets 的明确含义我一直将它用作字节。 但是这个属性的真正单位是什么？我不懂八位位组，而且它太含糊了。 你能用通俗的语言解释
我一直在寻找 acctinputoctets 或 acctoutputoctets 的明确含义我一直将它用作字节。 但是这个属性的真正单位是什么？我不懂八位位组，而且它太含糊了。 你能用通俗的语言解释
我是一名优秀的程序员,十分优秀！