为什么 SharePoint 不正确地显示我的 HTML 和 CSS 内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4261451/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is SharePoint dispalying my HTML and CSS content improperly?
提问by Pete
I am trying to add content to a SharePoint content editor web part, but when I do, it displays as if it's ignoring parts of my CSS.
我正在尝试将内容添加到 SharePoint 内容编辑器 Web 部件，但是当我这样做时，它显示为好像忽略了我的 CSS 的一部分。
It displays fine in Firefox 3.6 and IE 8 when it's a stand-alone page, but goes all off when the same code is placed in the Content Editor web part: Click here to view
当它是一个独立页面时，它在 Firefox 3.6 和 IE 8 中显示良好，但在内容编辑器 web 部件中放置相同的代码时完全消失：单击此处查看
Often, things that are broken in SharePoint when viewed through IE will appear correctly when the same SharePoint page is viewed in FF; this time the menu was laid out correctly, but the text was the wrong color (should be white).
通常，当在 FF 中查看相同的 SharePoint 页面时，通过 IE 查看时在 SharePoint 中损坏的内容会正确显示；这次菜单布局正确，但文本颜色错误（应该是白色）。
When I examine the code using IE's Developer Tools, Sharepoint appears to be ignoring #CAPMenu li's declaration of height:0;. If I disable height:0;when viewing the code outside of SharePoint or in SharePoint with Firefox, the menu falls apart a little. When I view the page in SharePoint through IE, the menu is already hosed and disabling height:0;makes no change...
当我使用 IE 的开发人员工具检查代码时，Sharepoint 似乎忽略#CAPMenu li了height:0;. 如果我height:0;在 SharePoint 之外或使用 Firefox 在 SharePoint 中查看代码时禁用，则菜单会稍微分崩离析。当我通过 IE 在 SharePoint 中查看页面时，菜单已经被处理并且禁用height:0;不会改变......
Please help! This is not the first design SharePoint has kept me from using.
请帮忙！这不是 SharePoint 阻止我使用的第一个设计。
Edit on 20101130: I found an article (http://friendlybit.com/html/default-html-in-sharepoint-2007/) about the state of the code SharePoint 2007 publishes from its masterpage and the article starts with what I think is mashing my code...
在 20101130 上编辑：我找到了一篇关于 SharePoint 2007 从其母版页发布的代码状态的文章 ( http://friendlybit.com/html/default-html-in-sharepoint-2007/)，文章以我的想法开头正在捣碎我的代码...
Things start out really bad, without a doctype on the first line:
<HTML xmlns:o="urn:schemas-microsoft-com:office:office"dir="ltr" __expr-val-dir="ltr">'
This mean that all default pages will render in quirks mode, making rendering unreliable across browsers.
事情开始真的很糟糕，第一行没有 doctype：
<HTML xmlns:o="urn:schemas-microsoft-com:office:office"dir="ltr" __expr-val-dir="ltr">'
这意味着所有默认页面都将以 quirks 模式呈现，从而使跨浏览器呈现不可靠。
Edit on 20120921: We've since moved to 2010, and while better, SP will still butcher my code in its attempt to fix it. I eventually figured out I could link a CEWP to an HTML file saved to a site library and have the code in the file load in the web part. Because SharePoint can't edit the file, my code comes through clean and pristine :-)
20120921 上的编辑：我们已经转移到 2010 年，虽然更好，但 SP 仍将屠宰我的代码以试图修复它。我最终发现我可以将 CEWP 链接到保存到站点库的 HTML 文件，并将文件中的代码加载到 Web 部件中。因为 SharePoint 无法编辑该文件，所以我的代码是干净而原始的 :-)
回答by Hugo Migneron
It can be a bit tricky to get your CSS to apply properly in any SharePoint web part, especially content editor web parts.
让您的 CSS 在任何 SharePoint Web 部件（尤其是内容编辑器 Web 部件）中正确应用可能有点棘手。
The main reason for that is that SharePoint generates a bunch of tables and sticks your web part inside that table.
这样做的主要原因是 SharePoint 生成了一堆表格并将您的 Web 部件粘贴在该表格中。
SharePoint adds the following HTML structure too all web part zones :
SharePoint 也将以下 HTML 结构添加到所有 Web 部件区域：
<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-->
It also applies a lot of CSS rules on that table and on the elements it contains. All the CSS rules for SharePoint are defined in the core.css file (which you can find in the 12 hive). While I don't recommend that you modify that file, you can analyse that rules from it that affect your code.
它还在该表及其包含的元素上应用了许多 CSS 规则。SharePoint 的所有 CSS 规则都在 core.css 文件（您可以在 12 hive 中找到）中定义。虽然我不建议您修改该文件，但您可以从中分析影响您代码的规则。
You will need to override some rules like .ms-WPHeader.ms-WPBody(for your web part header and body) in order to get your styles to apply.
您需要覆盖一些规则，例如.ms-WPHeader.ms-WPBody（对于您的 Web 部件标题和正文），以便应用您的样式。
The best way to find what styles are affecting your code is to use Firebug in firefox. Once you understand exactly why your code is broken (through firefox) you will most likely fix your page in all browsers at the same time (except for small things). Don't worry about cross browser compatibility at first, just worry about understanding the rules that come from core.css.
找出影响代码的样式的最佳方法是在 firefox 中使用 Firebug。一旦你确切地理解了你的代码被破坏的原因（通过 firefox），你很可能会同时在所有浏览器中修复你的页面（除了小事）。一开始不要担心跨浏览器的兼容性，只要担心理解来自core.css的规则。
While it is true that !important hacks can make your code work faster, your CSS sheet will become unmaintainable in no time if you go down that road.
虽然 !important hacks 确实可以让你的代码运行得更快，但如果你沿着这条路走下去，你的 CSS 表很快就会变得无法维护。
EDITTo make sure that your rule overrides .ms-WPBody (for the font-size for example) you can be more specific than SharePoint is. That is, say you have content inside a a web part :
编辑为了确保您的规则覆盖 .ms-WPBody（例如字体大小），您可以比 SharePoint 更具体。也就是说，假设您在 aa web part 中有内容：
<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>
Then create a css rule like this one :
然后创建一个像这样的 css 规则：
.ms-WPBody .my-content
{
font-size : 12pt;
/*Other rules you want to override*/
}
This will be more specific than what SharePoint is applying, and therefore your stylesheet will win.
这将比 SharePoint 应用的内容更具体，因此您的样式表将获胜。
As for your border question, it's really hard to know what rule is failing without seeing a live example or code.
至于您的边界问题，如果没有看到现场示例或代码，真的很难知道什么规则失败了。
However, you can try with these rules and see if they do anything for you. Use !important hacks if you need to find out which rule is the problem. The override it properly and remove the !important : This is assuming that you don't want any border...
但是，您可以尝试使用这些规则，看看它们是否对您有任何帮助。如果您需要找出问题所在的规则，请使用 !important hacks。正确覆盖它并删除 !important ：这是假设您不想要任何边框...
.ms-WPBorder, .ms-WPBorderBorderOnly
{
border: none !important;
}
.ms-PostTitle td
{
border: none !important;
}
td.ms-PostTitle
{
border: none !important;
}
回答by Jogendra
Sharepoint is a CMS software & the dynamically generate their code for pages & similarly they assign a CSS class to the tags. And those classes have some property defined in a style-sheet. In order to override those style use '!important' keyword in your style-sheet. for example
Sharepoint 是一个 CMS 软件 & 动态生成他们的页面代码 & 同样他们为标签分配一个 CSS 类。这些类在样式表中定义了一些属性。为了覆盖这些样式，请在样式表中使用 '!important' 关键字。例如
.class{ property:value !important; }
.class{ 属性：值 !important; }
hope this might help you, even if I haven't worked with Sharepoint ever.
希望这可以帮助您，即使我从未与 Sharepoint 合作过。
