代码之家 › 专栏 › 技术社区 › Jan_V

Sharepoint 2010+CSS3Pie无法工作,因为关闭行为和指定的url

behavior sharepoint-2010 css

Jan_V · 技术社区 · 14 年前

我正在为一个新的Sharepoint 2010面向公众的网站打上烙印。在这个网站上,我想使用阴影和圆角周围的几个容器。我第一次试着自己做,但是我的一个同事告诉我CSS3Pie( http://css3pie.com ),效果非常好。

我遇到的问题是指定HTC文件的路径。现在我知道了:

#left_content_small
{
    width: 610px;
    padding: 20px;
    border: 1px solid #999;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
    behavior: url(/PIE.htc);
}

这在IE中不能正常工作。而且,使用

    behavior: url(Style Library/StyleSheets/PIE.htc);

也没用。另外,在字符串周围放置“或”也不起作用。但是,指定如下行为URL:

behavior: url(_layouts/PIE.htc);

确实有效。所有容器现在都正确呈现。

我可以将htc文件放在layouts文件夹中,但我不希望这样做,因为它会破坏带有自定义文件的默认Sharepoint文件夹。

我已经用Fiddler检查了页面加载,我看到PIE.htc文件在所有情况下都返回200代码(这是好的)。不管我是把它放在布局、样式库还是网站的根目录中,每次它返回一个200。

CSS3Pie存在一些已知问题: http://css3pie.com/documentation/known-issues/ 它说明了相关的url等等。我以为我在url前面加了个/-字符就搞定了。也尝试了完整的域url( http://testsite.local/PIE.htc ),但这也不能正常工作。

如何将htc文件放在Sharepoint 2010网站的某个位置而不是layouts文件夹中?

7 回复 | 直到 14 年前

karthikr 12 年前

当使用.htc文件和SharePoint 2010(以及IE7之后的任何版本的IE)时,必须处于允许的文件模式,或者将“text/x-component”MIME类型添加到 AllowedInlineDownloadedMimeTypes 使用PIE列出每个web应用程序。

许可模式是最容易在web应用程序上设置的,但如果允许用户上载内容,也会为您打开潜在的漏洞。(这与默认情况下在SharePoint 2010中pdf不会在浏览器中打开的原因相同)

如果不允许此MIME类型,则IE将下载.htc,但它将拒绝执行文件中包含的任何行为(该文件使用“X-download-Options:noopen”头发送)。

通过PowerShell向webapp添加mime类型相对简单。

$webapp = Get-SPWebApplication <name or URL of web app>
$webapp.AllowedInlineDownloadedMimeTypes.Add("text/x-component")
$webapp.Update()

这是每个webapp的设置,因此您需要更改将使用PIE的每个webapp。

进行此更改还可以将PIE.htc存储在文档库中。

-罗伯特

Didier Caron 13 年前

我有同样的问题,并用pie.js文件修复了它:

$(document).ready(function (event) {
    var webparts = $('.s4-wpTopTable, .ms-WPSelected');
        $.each(webparts, function(index,webpart)
        {
            $(webpart).wrap("<div class=\"webpart rounded\" />");
        });

    Modernizr.load({
        test: Modernizr.borderradius,
        nope: '/siteassets/js/pie.js',
        complete: borderradiusComplete
    });
});


function borderradiusComplete()
{
    if (window.PIE && !Modernizr.borderradius) {
        $('.rounded, .bottomrounded').each(function() {
            PIE.attach(this);
        });
    }
}

然后在我的css中:

.borderradius .webpart.rounded
{ 
border-radius:5px 5px 5px 5px;
-khtml-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
-moz-border-radius:5px 5px 5px 5px
}
.no-borderradius .webpart.rounded
{
position:relative;
border-radius:10px 10px 10px 10px;
}

希望任何人都能从中受益。如果在进入编辑模式时显示框diss,则需要使用position:relative,如前所述。这适用于Sharepoint 2010和Office365 Sharepoint Online

Omar Lara 13 年前

我对sharepoint 2010品牌也有同样的问题,我用css3pie js版本修复了这个问题。

1您需要在母版页上添加jquery路径。 <script type=“text/javascript”src=“/Scripts/jquery-1.6.2.min.js”></脚本>

2在母版页上添加pie.js脚本 <script type=“text/javascript”src=“/Scripts/PIE.js”></脚本>

3您需要创建一个jsf函数来附加馅饼。在母版页上 <script type=“text/javascript”> $(function() { if (window.PIE) { // the name of your element has the class="rounded" $('.rounded').each(function() { PIE.attach(this); }); } });

4保存并发布母版页和脚本

John 12 年前

似乎PIE.htc文件只能从虚拟目录(如布局)中识别和呈现。我尝试了非虚拟目录中的所有变体。

Zerfu Kebede 6 年前

我用PIE.htc文件作为border radius来应用它 img 元素打开 *.aspx SharePoint 2010环境中的页。相对和绝对的url组合对我都不起作用。例如,以下各项都不起作用:

bahavior: url(http://[root]/[path]/PIE.htc); 
behavior: url(/[path]/PIE.htc);
behavior: url(../[path]/PIE.htc);  
behavior: url([path]/PIE.htc);

PIE.htc文件仅在与*.aspx文件放在同一文件夹中时才起作用。即bahavior:url(PIE.htc)。在尝试使用单引号和双引号(包括相对路径和绝对路径)进行不同的url组合之后,我终于能够使用文件“PIE_uncompressed.htc”的未压缩版本使其正常工作。无论是单引号、双引号还是无引号,当我使用未压缩文件时,它对绝对路径和相对路径都有效。因此,对于未压缩的文件,任何相对或绝对路径都可以正常工作。我还要补充 position:relative 在CSS中,如下所示:

img.homePageButton
{
 position:relative;
 border-radius: 25px;
 behavior: url(/[path]/PIE_uncompressed.htc);
}

上面的CSS运行良好,图像在IE8中使用边框半径进行了适当的样式设置。
注: 相对路径应该相对于*.aspx文件,而不是CSS文件。也可以使用相对于根站点的url路径。

Community Paul Sweatte 7 年前

查看有关此问题的信息是否有帮助:

CSS3 PIE - Giving IE border-radius support not working?

我认为这个答案可能有用,但你也可以在其他答案中找到好的信息。

CSS3 PIE - Giving IE border-radius support not working?

nickb 13 年前

在SP2010的大多数情况下,使用绝对路径似乎工作得很好。我们在SharePoint解决方案中引用它,没有任何问题:

.yourPIEEnhancedClass {
    behavior: url('/_layouts/ProjectName/Styles/PIE.htc');
}

如果您出于任何原因指向样式库,字符串中的空格可能会迫使您必须对行为URL使用带引号的字符串。。。在CSS中,大多数事情都是这样(例如,带有空格的字体名)。

我唯一能想到的是确保I is提供正确的mime类型( 文本/x组件 )为HTC。您可能需要根据 known issues documentation .