html - 在电子邮件签名中使用高级 ccs 图标

Question

关于如何在电子邮件签名中附加图形的老问题。 IE。我可以将图像附加为链接，这意味着 outlook 用户将看不到它。我可以将它们嵌入为编码图像，但只有从 outlook(我们同时使用 gmail 和 outlook)等发送时才有效。所以我有了一个想法，如果我只使用 CSS 图标会怎样，这可以让我少一些头痛。

不过这是我的问题，我该如何解决。在网页上很简单，只需将其添加到样式表中或样式标签之间，如下所示

<style>
.marker{
margin-top: 1.0em;
margin-left: 1.0em;
position: relative;
    width: 1.5em;
    height: 0.5em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-bottom-right-radius: 0.3em;
    border-top-right-radius: 0.3em;
font-size: 12px;

}

.marker:after{
 position: absolute;
content: "";
top: 0.3em;
left: 0em;
width: 0em;
height: 0em;
border-top: 0.9em solid rgba(44, 44, 44, 0);
border-bottom: 0.9em solid transparent;
border-left: 1.4em solid #2C2C2C;
-webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);  
}

.marker:before{
 border: 0.5em solid #2C2C2C;
    content: "";
    position: absolute;
    top: -0.8em;
    left: -1.28em;
    display: block;
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
}
</style>

但是，我似乎无法使该解决方案在电子邮件签名中起作用。我想也许我真的可以将它嵌入到 div 样式参数中，但不确定我是否可以将高级样式放入 div 样式中。

我说的是下面的内容

<div style=".marker{
margin-top: 1.0em;
margin-left: 1.0em;
position: relative;
    width: 1.5em;
    height: 0.5em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-bottom-right-radius: 0.3em;
    border-top-right-radius: 0.3em;
font-size: 12px;

}

.marker:after{
 position: absolute;
content: "";
top: 0.3em;
left: 0em;
width: 0em;
height: 0em;
border-top: 0.9em solid rgba(44, 44, 44, 0);
border-bottom: 0.9em solid transparent;
border-left: 1.4em solid #2C2C2C;
-webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);  
}

.marker:before{
 border: 0.5em solid #2C2C2C;
    content: "";
    position: absolute;
    top: -0.8em;
    left: -1.28em;
    display: block;
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
}"></style>

Answer 1

好吧，你可以试试。但是不，那是行不通的。您在 style 属性中添加的样式应该只是该元素的样式，而不是文档的完整样式表，甚至只是子元素。

但是大多数邮件客户端确实会忽略 style 标签。此外，他们可能会忽略或明确删除一些内联样式，因此我会确保在各种客户端上对其进行彻底测试，或者可能立即决定不使用它而只使用几个图像或单个 sprite 图像。