分享程序员开发的那些事...
更新时间：2023-02-06 14:02:47
这可能有点棘手让您的CSS在任何SharePoint Web部件，特别是内容编辑器Web部件中正确应用。
主要原因是SharePoint生成一堆表并将您的web部分。
SharePoint也会在所有Web部件区域中添加以下HTML结构：
< table cellspacing =0cellpadding =0border =0width =100％>
< tbody>
< tr>
< td valign =topid =MSOZoneCell_WebPartWPQ3>
<！ - 您的Web部件HTML在大多数情况下从此处开始 - >
它也在该表格及其包含的元素上应用了很多CSS规则。所有关于SharePoint的CSS规则都是在core.css文件中定义的（您可以在12个配置单元中找到它）。虽然我不建议您修改该文件，但您可以分析影响您代码的规则。
您需要重写一些规则，如 .ms-WPHeader .ms-WPBody （用于您的Web部件标题和正文），以便让您的样式适用。 / p>
查找哪些样式影响代码的***方法是在firefox中使用Firebug。一旦你明确知道你的代码被破坏的原因（通过firefox），你很可能会同时在所有浏览器中修复你的页面（除了小事情）。开始时不要担心跨浏览器的兼容性，只是担心理解来自core.css的规则。
尽管确实！重要的黑客可以使您的代码运行得更快，如果你顺着这条路走下去，你的CSS表格将很快变得无法维护。
编辑
为了确保您的规则将覆盖.ms-WPBody（例如，对于字体大小），您可以比SharePoint更具体。也就是说，你有一个web部件内的内容：
< table cellspacing =0cellpadding =0border =0width =100％>
< tbody>
< tr>
< td valign =topid =MSOZoneCell_WebPartWPQ3>
< div class =my-content>您的内容< / div>
< / td>
< / tr>
< / tbody>
< / table>
然后创建一个像这样的css规则：
.ms-WPBody .my-content
{
font-size：12pt;
/ *您要覆盖的其他规则* /
}
比SharePoint应用更具体，因此你的样式表会胜出。
至于你的边框问题，真的很难知道什么规则失败而没有看到一个活示例或代码。
但是，您可以尝试使用这些规则，看看他们是否为您做了任何事情。使用！重要的黑客，如果你需要找出哪个规则是问题。正确地覆盖它并删除！important：
这是假设你不想要任何边界...
.ms-WPBorder，.ms-WPBorderBorderOnly
{
border：none！important;
}
.ms-PostTitle td
{
border：none！important;
}
td.ms-PostTitle
{
border：none！important;
}
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.
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
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).
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...
Please help! This is not the first design SharePoint has kept me from using.
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...
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.
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 :-)
It can be a bit tricky to get your CSS to apply properly in any SharePoint web part, especially content editor web parts.
The main reason for that is that SharePoint generates a bunch of tables and sticks your web part inside that table.
SharePoint adds the following HTML structure too all web part zones :
<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.
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.
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.
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.
EDIT To 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 :
<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 :
.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.
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...
.ms-WPBorder, .ms-WPBorderBorderOnly
{
border: none !important;
}
.ms-PostTitle td
{
border: none !important;
}
td.ms-PostTitle
{
border: none !important;
}