2

这很奇怪，我收到的一封邮件对 css 有以下定义：

<style type="text/css">
...NL-default {
    font-family: "Arial";
    font-size: 12px;
    color: #000000;
}
...style1 {
    font-family: "Arial";
    font-size: 12px;
    color: #0000FF;
}
...style4 {
    text-align: center;
    background-color: #F3F3F3;
    font-family: "Arial";
    font-size: 12px;
    color: #000000;
}
...style7 {
    text-align: center;
    color: #FFFFFF;
    background-color: #000080;
    font-family: "Arial";
    font-size: 12px;
    font-weight: bold;
}
...style14 {
    font-family: "Arial";
    font-size: 14px;
    color: #FF3300;
    font-weight: bold;
}

基本上所有样式前面都有三个句点。

它被应用在这样的事情上：

    <table style="width: 100%;" class="style41" cellSpacing="1" cellPadding="3">

        <tbody><tr>
            <td style="width: 233px;" class="style34" strong=""><strong>Notification</strong></td>

我相信大多数人的第一直觉可能是……这行不通，你是对的。在 Chrome、Firefox 和 IE9 上，CSS 根本不应用于邮件正文。

然而，在 IE8 上，它得到了完美的应用，这让我有点困惑。在 CSS 定义前面加上三个句点的目的是什么？为什么这只适用于 IE8？

4

1 回答 1

2

众所周知，IE 将类选择器中的前导点视为常规类选择器，就像它在 quirks 模式下仅将多个类选择器视为链中的最后一个一样。

也就是说......这似乎是一个非常丑陋的黑客行为。我什至不确定它是作为 IE hack 的，因为代码看起来不像是只供 IE 使用的。在那种情况下，我不知道在这样的邮件样式中添加前导句点的真正目的是什么。

另外，我不确定为什么代码不能在 IE9 中运行，甚至在 quirks 模式下也不能。以下测试用例肯定会使所有 IE 版本（包括 9）中的文本变为红色：

<html>
  <head>
    <style type="text/css">
    ...foo {
        color: #FF0000;
    }
    </style>
  </head>
  <body>
    <p class="foo">This text should not be red.</p>
  </body>
</html>

您可能已经猜到，这不是有效的 CSS。这就是为什么它在其他浏览器中不起作用，甚至在它们的怪癖模式下也不起作用。

于 2013-01-11T07:34:33.667 回答