我创建了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只是一个绕过我注入的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>


这是因为(似乎)将htmlbody标记嵌入div时会被去除(这很有意义)。因此,只需在类中添加一个包含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上的<div>属性将保留,而不管对innerHTML的修改如何。

希望有帮助!

关于html - 阻止“innerHTML”中的样式影响父级,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45107652/

10-12 12:37
查看更多