4

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

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

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

当我使用 IE 的开发者工具检查代码时，Sharepoint 似乎忽略#CAPMenu li了height:0;. 如果我在 SharePoint 外部或使用 Firefox 的 SharePoint 中查看代码时禁用height:0;，则菜单会稍微分崩离析。当我通过 IE 在 SharePoint 中查看页面时，菜单已经被冲洗，禁用height:0;不会改变......

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

在 20101130 上编辑：我找到了一篇关于 SharePoint 2007 从其母版页发布的代码状态的文章 ( http://friendlybit.com/html/default-html-in-sharepoint-2007/ )，文章从我的想法开始正在捣碎我的代码...

事情开始很糟糕，第一行没有文档类型：
<HTML xmlns:o="urn:schemas-microsoft-com:office:office" dir="ltr" __expr-val-dir="ltr">'
这意味着所有默认页面都将以怪异模式呈现，使得跨浏览器的呈现不可靠。

在 20120921 上编辑：我们已经移至 2010 年，虽然更好，但 SP 仍会在尝试修复它时屠杀我的代码。我最终发现我可以将 CEWP 链接到保存到站点库的 HTML 文件，并将文件中的代码加载到 Web 部件中。因为 SharePoint 无法编辑文件，所以我的代码干净整洁 :-)

4

2 回答 2

6

让您的 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。一旦你确切地理解了你的代码被破坏的原因（通过火狐），你很可能会同时在所有浏览器中修复你的页面（除了小问题）。一开始不要担心跨浏览器的兼容性，只担心理解来自core.css的规则。

虽然 !important hack 确实可以让你的代码运行得更快，但如果你走这条路，你的 CSS 表将很快变得无法维护。

编辑 要确保您的规则覆盖 .ms-WPBody （例如对于字体大小），您可以比 SharePoint 更具体。也就是说，假设您在 aa 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;
}
于 2010-11-24T14:28:11.373 回答
0

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

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

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

于 2010-11-24T05:33:30.097 回答