为什么 SharePoint 无法正确显示我的 HTML 和 CSS 内容？

Question

我正在尝试将内容添加到 SharePoint 内容编辑器 Web 部件，但当我这样做时，它显示的好像忽略了 CSS 的部分内容。

当它是独立页面时，它在 Firefox 3.6 和 IE 8 中显示良好，但当将相同的代码放置在内容编辑器 Web 部件中时，它会完全消失： 单击此处查看

通常，在通过 IE 查看时在 SharePoint 中损坏的内容在通过 IE 查看时会正确显示。 FF；这次菜单布局正确，但文本颜色错误（应该是白色）。

当我使用 IE 的开发人员工具检查代码时，Sharepoint 似乎忽略了 #CAPMenu li 的 height:0; 声明。如果我在 SharePoint 外部或使用 Firefox 在 SharePoint 中查看代码时禁用 height:0;，菜单会稍微崩溃。当我通过 IE 查看 SharePoint 中的页面时，菜单已被隐藏，禁用 height:0; 不会发生任何变化...

请帮忙！这并不是 SharePoint 阻止我使用的第一个设计。

于20101130编辑：我找到一篇文章（http://friendbit.com/html /default-html-in-sharepoint-2007/) 关于 SharePoint 2007 从其母版页发布的代码的状态，本文以我认为正在混搭我的代码的内容开始...

事情一开始就很糟糕，第一行没有文档类型：
dir="ltr" __expr-val-dir="ltr">'
这意味着所有默认页面都将以怪异模式呈现，从而导致跨浏览器的呈现不可靠。

20120921 上的编辑：我们已经进入了 2010 年，虽然情况有所好转，但 SP 仍然会在尝试修复它时破坏我的代码。我最终发现我可以将 CEWP 链接到保存到站点库的 HTML 文件，并将文件中的代码加载到 Web 部件中。由于 SharePoint 无法编辑该文件，因此我的代码干净且原始:-)

Answer 1

Sharepoint 是一款 CMS 软件动态生成页面和代码同样，他们为标签分配一个 CSS 类。这些类在样式表中定义了一些属性。为了覆盖这些样式，请在样式表中使用“!important”关键字。例如

.class{
属性：值！重要；
。

即使我从未使用过 Sharepoint，希望这对您有所帮助

Answer 2

让 CSS 在任何 SharePoint Web 部件（尤其是内容编辑器 Web 部件）中正确应用可能有点棘手。

主要原因是 SharePoint 生成一堆表并将您的 Web 部件粘贴到该表中。

SharePoint 在所有 Web 部件区域中添加了以下 HTML 结构：

<table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tbody>
        <tr>
            <td valign="top" id="MSOZoneCell_WebPartWPQ3">
                 <!--Your web part HTML starts here in most cases-->

它还在该表及其包含的元素上应用了许多 CSS 规则。 SharePoint 的所有 CSS 规则都在 core.css 文件中定义（您可以在 12 hive 中找到该文件）。虽然我不建议您修改该文件，但您可以从中分析影响您的代码的规则。

您将需要覆盖一些规则，例如 .ms-WPHeader .ms-WPBody（针对您的 Web 部件标头和正文），以便应用您的样式。

查找影响代码的样式的最佳方法是在 Firefox 中使用 Firebug。一旦您确切地了解代码被破坏的原因（通过 Firefox），您很可能会同时在所有浏览器中修复您的页面（除了小事情）。首先不要担心跨浏览器兼容性，只需担心理解来自 core.css 的规则即可。

虽然 !important hack 确实可以让你的代码运行得更快，但如果你沿着这条路走下去，你的 CSS 表很快就会变得难以维护。

编辑
为了确保您的规则覆盖 .ms-WPBody（例如字体大小），您可以比 SharePoint 更具体。也就是说，假设您在某个 Web 部件中有内容：

<table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tbody>
        <tr>
            <td valign="top" id="MSOZoneCell_WebPartWPQ3">
                <div class="my-content">Your content</div>
            </td>
        </tr>
     </tbody>
</table>

然后创建一个如下所示的 css 规则：

.ms-WPBody .my-content
{
    font-size : 12pt;
    /*Other rules you want to override*/
}

这将比 SharePoint 所应用的规则更具体，因此您的样式表将获胜。

至于你的边界问题，如果没有看到实时示例或代码，真的很难知道什么规则失败了。

但是，您可以尝试使用这些规则，看看它们是否对您有帮助。如果您需要找出问题所在的规则，请使用 !important hacks。正确覆盖它并删除 !important ：
这是假设你不想要任何边框......

.ms-WPBorder, .ms-WPBorderBorderOnly
{
    border: none !important;
}

.ms-PostTitle td
{
    border: none !important;
}

td.ms-PostTitle
{
    border: none !important;
}