我创建了一封 HTML 电子邮件，它可以在我测试过的几个电子邮件客户端中正确显示，但是当我在页面上提供它的预览时，innerHTML 中的嵌入样式会影响父级。一定可以避免这种情况，因为当我在 gmail 中查看电子邮件时，它会正确显示，而无需更改 gmail 本身的样式。
下面是一些显示问题的 HTML(但在 gmail 中显示没有副作用):
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
* { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }
</style>
</head>
<body>
<pre style="white-space:pre-wrap;">Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test </pre>
</body>
</html>
我正在使用 Angular 4，因此我以这种方式将其包含在我的页面中:
<div [innerHTML]="myHtml | safeHtml">
</div>
...safeHtml 只是一个绕过对我注入(inject)的 HTML 进行 Angular 检查的管道:
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
@Pipe({name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitizer:DomSanitizer){}
transform(html) {
return this.sanitizer.bypassSecurityTrustHtml(html);
}
}
它的工作原理是，它确实在 div 中显示 html，但样式信息会更改页面上的所有内容。我明白了 - 我实际上是在嵌入样式中使用 * 。 ...但正如我所说，gmail 设法以某种方式“包含”它，因此它不会重新设置父元素的样式。我该如何实现这个目标？
理想情况下，我希望完全样式隔离 - 就像我不希望父样式受到子样式的影响，或者子样式受到父样式的影响(这似乎就是 gmail 的行为方式)。
更新
将 HTML 更改为以下内容可以使其适用于电子邮件，并包含 CSS，但无法嵌入 Angular 中:
<!DOCTYPE HTML>
<html class="my-class">
<head>
<style type="text/css">
.my-class * {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
color: blue;
}
.my-class pre {
white-space:pre-wrap;
}
</style>
</head>
<body>
<pre>Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test </pre>
</body>
</html>
这是因为(看起来)当您将其嵌入到 div 中时，html 和 body 标记会被删除(这使得一些感觉)。因此，只需在该类中添加一个包含 div 的父级，它就可以正常工作 - 嵌入到电子邮件中:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.my-class * {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
color: blue;
}
.my-class pre {
white-space:pre-wrap;
}
</style>
</head>
<body>
<div class="my-class">
<pre>Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test Test test </pre>
</div>
</body>
</html>
最佳答案
@petryuno1 建议的最佳方法是使用组件，因为它将 CSS/样式的范围仅限于该组件，但在基本级别上，您可以将类应用于 <div [innerHTML]="myHtml | safeHtml"></div>如:
<div class="foo" [innerHTML]="myHtml | safeHtml"></div>
然后将css修改为目标*如果组件不可行，则使用该类？
.foo * { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }
class属性(property)<div>无论对 innerHTML 的修改如何，都将保留.
希望有帮助!
关于html - 阻止 `innerHTML` 中的样式影响父级，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45107652/