Sharepoint 2010 + CSS3Pie 无法正常工作，因为行为和指定的 url答案

【问题标题】：Sharepoint 2010 + CSS3Pie isn't working because off behavior and specified urlSharepoint 2010 + CSS3Pie 无法正常工作，因为行为和指定的 url
【发布时间】：2018-04-25 10:52:08
【问题描述】：

我正在打造一个新的 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 文件夹中的任何想法？

【问题讨论】：

由于过去几个月/几年我没有从事 SharePoint 项目，因此我无法确认具体答案。如果有人能告诉我其中一个 cmets 是否包含正确答案，我会很乐意标记它。

标签： css sharepoint-2010 behavior

【解决方案1】：

使用 .htc 文件和 SharePoint 2010（以及 IE7 之后的任何 IE 版本）时，您必须处于许可文件模式或将“text/x-component”MIME 类型添加到每个文件的 AllowedInlineDownloadedMimeTypes 列表中使用 PIE 的 Web 应用程序。

许可模式是在网络应用程序上最容易设置的模式，但如果您允许用户上传内容，也会让您面临潜在的攻击。（这与 SharePoint 2010 中默认情况下不在浏览器中打开 PDF 的原因相同）

如果不允许此 MIME 类型，则 IE 将下载 .htc，但将拒绝执行文件中包含的任何行为（文件以“X-Download-Options:noopen”标头发送）。

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

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

这是针对每个 webapp 的设置，因此您需要对每个将使用 PIE 的 webapp 进行更改。

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

-罗伯特

【讨论】：

这是正确的答案，因为上述问题不一定是由相对 URL 引起的，而只是文件位于“_layouts/”而不是“/style library/”时的处理方式"。
这是正确答案，应适当标记。

【解决方案2】：

我遇到了同样的问题并用 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;
}

希望任何人都能从中受益。如果进入编辑模式时框消失了，则需要使用 position:relative ，如上文所述。这适用于 Sharepoint 2010 和 Office365 Sharepoint Online

【讨论】：

谢谢！我不再参与该项目，因此无法对其进行测试，但无论如何都赞成它。看起来还不错。

【解决方案3】：

我在使用 sharepoint 2010 品牌时遇到了同样的问题，我使用 css3pie js 版本进行了修复。

1 您需要在母版页上添加 jquery 路径。

2 在您的母版页上添加 pie.js 脚本 script >

3 你需要创建一个 jsfunction 来附加饼图。在您的母版页上 $(function() { if (window.PIE) { // the name of your element has the class="rounded" $('.rounded').each(function() { PIE.attach(this); }); } });

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

【讨论】：

【解决方案4】：

似乎 PIE.htc 文件只能从 _layouts 之类的虚拟目录中识别和呈现。我尝试了非虚拟目录的所有变体。

【讨论】：

【解决方案5】：

我使用 PIE.htc 文件作为边框半径，将其应用于 SharePoint 2010 环境中 *.aspx 页面上的 img 元素。相对和绝对的任何 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 文件放在同一文件夹中时才有效。即行为：url（PIE.htc）。在尝试了使用单引号和双引号（相对路径和绝对路径）的不同 url 组合之后，我终于能够通过使用文件“PIE_uncompressed.htc”的未压缩版本来使其工作。无论是单引号、双引号还是无引号，当我使用未压缩文件时，它对绝对路径和相对路径都适用。因此，任何相对或绝对路径都适用于未压缩文件。我还必须在 CSS 中添加position:relative，如下所示：

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

上面的 CSS 工作正常，并且图像在 IE8 中使用边框半径正确设置样式。
注意：相对路径应该相对于 *.aspx 文件而不是 CSS 文件。您还可以使用相对于根站点的 url 路径。

【讨论】：

您知道答案是 8 岁吗？另外，正确缩进代码，这里是关于降价的文档：Markdown editing help。关于答案的内容，我无话可说，我对所有这些 CSS 东西并不感兴趣。我也不是投反对票的人。
是的，我知道问题和答案都太老了。我正在寻找解决方案，我尝试了所有选项，但对我不起作用。我花了很多时间在我的 SharePoint 2010 页面上设置边框半径。我发布了这个答案，因为它没有问题，而且也很简单。它可以为其他有同样问题的人工作，我希望它能节省他们的时间。
只是为了避免任何误解：不鼓励回答老问题。否决票可能是因为格式...（+1）

【解决方案6】：

看看这个问题的信息是否有帮助：

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

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

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

【讨论】：

【解决方案7】：

在 SP2010 的大多数情况下，使用绝对路径似乎可以正常工作。我们像这样在我们的 SharePoint 解决方案中引用它，没有任何问题：

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

如果您出于某种原因指向样式库，则字符串中的空格可能会迫使您必须为行为 URL 使用带引号的字符串... CSS 中的大多数内容也是如此（例如字体名称带空格）。

我能想到的唯一另一件事是确保 IIS 为 .HTC 提供正确的 mime 类型（text/x-component）。您可能需要按照known issues documentation 手动添加它。

【讨论】：