多个 css 类不起作用
Fay*_*yaz 5 css outlook openxml apache-poi outlook-2010
我正在将 docx 转换为 html 格式（使用 apache poi）并将其作为电子邮件发送。
生成的 html 片段看起来像这样
<html>
<head>
....
<style>
span.Normal{
font-family: 'Arial';font-size: 9.0pt;
}
span.Title{
font-family: 'Cambria';font-size: 28.0pt;color: #000000;
}
span.MySubtitle{
font-family: 'Arial';font-size: 18.0pt;color: #000000;
}
span.MyTitle{
font-family: 'Arial';font-size: 22.0pt;font-weight: bold;color: #000000;
}
...
</style>
</head>
<body>
....
<p class="Normal Title MyTitle">
<span id="_GoBack">
<span class="Normal Title MyTitle">Welcome Message</span>
<span class="Normal Title MyTitle"> </span>
<span class="Normal Title MyTitle">Username</span>
</p>
<p class="Normal Title MySubtitle">
<span class="Normal Title MySubtitle">Issues and Solutions</span>
</p>
...
</body>
</html>Outlook 客户端无法识别多个 css 类。它只渲染第一个 css 类“Normal”并忽略其余部分。但我的原始格式（在 docx 中）存在于“MyTitle”和“MySubTitle”类中。
Outlook 支持多种 CSS 吗？有没有办法可以控制多个 css 生成。
我自己刚刚发现这个问题。
看来 Outlook 只采用class属性中列出的第一类，而忽略其他所有内容。
样式表：
<!--[if gte mso 9]>
<style type="text/css">
.red {
color: red;
}
.large {
font-size: 72px;
}
</style>
<![endif]-->
标记：
<div class="red">
THIS SHOULD BE RED IN OUTLOOK
</div>
<div class="large">
THIS SHOULD BE LARGE IN OUTLOOK
</div>
<div class="red large">
THIS SHOULD BE RED AND LARGE IN OUTLOOK
</div>
<div class="large red">
THIS SHOULD BE RED AND LARGE IN OUTLOOK
</div>
结果：
据我所知，所有版本的 Outlook 都会受到影响。包括较新的。
我已经提交了一份错误报告来hteumeuleu/email-bugs记录这个怪癖：
https://github.com/hteumeuleu/email-bugs/issues/117
好吧，这里有很多问题。首先，html 根本不正确。您将段落嵌套在段落中，并使用跨度来定义标题，并将每个单词拆分为它自己的跨度。
我不知道开头和结尾的那三个点是做什么用的，但它们不应该出现在样式标签中。
您的类名并不是真正的描述性的，它们是重复的规则，您将每个类应用于每个元素，并且它们在样式表中的顺序是混乱的，这使得理解正在发生的事情变得混乱。
我的建议是：
- 使用语义标记
- 丢弃类并使用语义选择器
- 使用DRY原则（不要重复自己）
- 按逻辑顺序列出规则，例如从最大的开始到最小的结束。
以下是一些使用样式规则重构的代码，并演示了如何使用每个元素。
<html>
<head>
<style>
body {
color: #000000;
}
h1,
h2,
p {
font-family: 'Arial';
}
h3 {
font-family: 'Cambria';
}
h1 {
font-size: 28pt;
}
h2 {
font-size: 22pt;
}
h3 {
font-size: 18pt;
}
p {
font-size: 9pt;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>
Heading 2
</h2>
<h3>
Heading 3
</h3>
<p>
This is paragraph text.
</p>
</body>
</html>| 归档时间： |
|
| 查看次数： |
4915 次 |
| 最近记录： |