Pet*_*ete 3 html css sharepoint-2007 cewp sharepoint-2010
我正在尝试向SharePoint内容编辑器Web部件添加内容,但是当我这样做时,它显示为忽略了我的CSS部分.
当它是一个独立的页面时,它在Firefox 3.6和IE 8中显示正常,但在内容编辑器Web部件中放置相同的代码时全部关闭:点击此处查看
通常,当在FF中查看相同的SharePoint页面时,通过IE查看时在SharePoint中损坏的内容将正确显示; 这次菜单布局正确,但文字颜色错误(应为白色).
当我使用IE的开发者工具检查代码时,Sharepoint似乎忽略了它#CAPMenu li的声明height:0;.如果我height:0;在SharePoint之外或使用Firefox查看SharePoint时禁用,则菜单会稍微分开.当我通过IE在SharePoint中查看页面时,菜单已经被清除,禁用height:0;不会发生变化...
请帮忙!这不是SharePoint阻止我使用的第一个设计.
编辑于20101130:我发现了一篇关于SharePoint 2007从其主页发布的代码状态的文章(http://friendlybit.com/html/default-html-in-sharepoint-2007/),文章从我的想法开始正在捣碎我的代码......
事情开始非常糟糕,第一行没有doctype:
<HTML xmlns:o="urn:schemas-microsoft-com:office:office"dir ="ltr"__ expr-val-dir ="ltr">'
这意味着所有默认页面都将以怪癖模式呈现,使得各种浏览器的呈现不可靠.
编辑于20120921:我们已经搬到了2010年,虽然更好,但SP仍会在我的代码中试图解决它.我最终发现我可以将CEWP链接到保存到站点库的HTML文件,并将文件中的代码加载到Web部件中.因为SharePoint无法编辑该文件,我的代码通过干净和原始的方式:-)
让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个配置单元中找到).虽然我不建议您修改该文件,但您可以从中分析影响代码的规则.
您需要覆盖一些规则,例如.ms-WPHeader .ms-WPBody(对于您的Web部件标题和正文),以便应用您的样式.
找到影响代码的样式的最佳方法是在firefox中使用Firebug.一旦你明白为什么你的代码被破坏了(通过firefox),你很可能会同时在所有浏览器中修复你的页面(除了小东西).首先不要担心跨浏览器兼容性,只是担心理解来自core.css的规则.
虽然确实!重要的黑客攻击可以让你的代码更快地运行,但如果你沿着这条路走下去,你的CSS表将立刻变得无法维护.
编辑 要确保您的规则覆盖.ms-WPBody(例如,对于font-size),您可以比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:这假设您不需要任何边框...
.ms-WPBorder, .ms-WPBorderBorderOnly
{
border: none !important;
}
.ms-PostTitle td
{
border: none !important;
}
td.ms-PostTitle
{
border: none !important;
}