方式1

Question

人们使用所见即所得来创建一条消息。

我对此阶段产生的字符串没有任何控制权。我只是“得到”＃39;字符串，包括通过Web服务的所有格式，返回单个字符串。

所以例如我会回来的：

<p>here is the <a href='http://www.example.com'>link</a>

不幸的是，我还在相同的字符串中找回字体定义和其他样式属性。例如

<!--
/* Font Definitions */
@font-face
    {font-family:"Cambria Math";
    panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
    {font-family:Calibri;
    panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
    {font-family:Tahoma;
    panose-1:2 11 6 4 3 5 4 4 2 4;}
@font-face
    {font-family:Corbel;
    panose-1:2 11 5 3 2 2 4 2 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
    {margin:0cm;
    margin-bottom:.0001pt;
    font-size:11.0pt;
    font-family:"Calibri",sans-serif;
    mso-fareast-language:EN-US;}
a:link, span.MsoHyperlink
    {mso-style-priority:99;
    color:#0563C1;
    text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
    {mso-style-priority:99;
    color:#954F72;
    text-decoration:underline;}
span.EmailStyle17
    {mso-style-type:personal-compose;
    font-family:"Calibri",sans-serif;
    color:windowtext;}
.MsoChpDefault
    {mso-style-type:export-only;
    font-family:"Calibri",sans-serif;
    mso-fareast-language:EN-US;}
@page WordSection1
    {size:612.0pt 792.0pt;
    margin:72.0pt 72.0pt 72.0pt 72.0pt;}
div.WordSection1
    {page:WordSection1;}
-->

显然这会改变整个页面的格式，而不仅仅是使用wysiwyg创建的消息，因为它定义了HTML标签而不是使用实际的类或id。

是否有可能以某种方式将页面分开，以便内部的任何CSS定义仅适用于该HTML块？或者我是否必须将它放入带有ID的div块中并以某种方式检查返回的字符串（包含样式元素）并将任何定义更新为该ID的子节点？即，而不是a:visited我需要将其呈现为#exampleID a:visited

如果我需要做后者，任何人都有最好的方法来解决这个问题吗？

谢谢大家。这只是我的第二个问题，仍在学习发布这些问题的正确方法。因此，请询问您认为我错过的任何信息，并将更新帖子。

Answer 1

是否有可能以某种方式将页面分开，以便内部的任何CSS定义仅适用于该HTML块？

在iframe中渲染。不幸的是proper alternative has no support whatsoever in current browsers。

Answer 2

方式1

使用iframe显示内容。

如果有很多这样的障碍，这不是一个好方法。

方式2

向容器添加一些id并更新css选择器，以便它们将此id作为第一个元素。我认为，这是最好的方式。

不要使用方式3

属性scoped已从规范中删除，浏览器支持效果不佳。

警告

无论如何，您必须以某种方式验证代码以防止其中的恶意软件脚本。

CSS定义在页面中分隔

2 个答案:

方式1

方式2

不要使用方式3

警告