Sharepoint 2010 + CSS3Pie не работает, потому что отключено поведение и указанный URL

Question

Я рекламирую новый публичный сайт 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);

тоже не работает. Также, размещение "or 'вокруг строки не работает. Однако, указав URL-адрес поведения следующим образом:

behavior: url(_layouts/PIE.htc);

работает. Все контейнеры теперь отображаются правильно.

Я мог бы разместить htc-файл в папке макетов, но я предпочитаю этого не делать, так как он как бы портит стандартные папки Sharepoint с пользовательскими файлами.

Я проверил загрузку страницы с помощью Fiddler и вижу, что файл PIE.htc возвращает 200-код (это хорошо) во всех случаях. Не имеет значения, помещаю ли я его в макеты, библиотеку стилей или корень сайта, каждый раз, когда он возвращает 200.

Есть некоторые известные проблемыс CSS3Pie: http://css3pie.com/documentation/known-issues/, в котором указано что-тооб относительных URL и тому подобное.Я думал, что прибил его, поместив символ / перед URL.Также пробовал полный URL домена (http://testsite.local/PIE.htc), но он тоже не работает должным образом.

Есть идеи, как разместить htc-файл где-нибудь на сайте Sharepoint 2010, а не в папке раскладок?

Answer 1

При работе с файлами .htc и SharePoint 2010 (и любой версией IE после IE7) необходимо либо находиться в режиме разрешающего файла, либо добавить MIME-тип «text / x-component» в список AllowedInlineDownloadedMimeTypes для каждоговеб-приложение, использующее PIE.

Разрешающий режим проще всего установить в веб-приложении, но он также открывает вам потенциальные возможности, если вы разрешаете пользователям загружать контент.(Это та же самая причина, по которой PDF-файлы не открываются в вашем браузере по умолчанию в SharePoint 2010)

Если этот тип MIME не разрешен, IE загрузит .htc, но откажется выполнять любое поведение, содержащееся в нем.в файле (файл отправляется с заголовком «X-Download-Options: noopen»).

Добавление типа mime в веб-приложение относительно просто с помощью PowerShell.

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

Это настройка для каждого веб-приложения, поэтому вам нужно будет внести изменения в каждое веб-приложение, которое будет использовать PIE.

Внесение этого изменения также позволит вам сохранить файл PIE.htc внутри библиотеки документов.

-Роберт

Answer 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: относительным, как описано выше.это работает на Sharepoint 2010 и Office365 Sharepoint Online

Answer 3

Я использовал файл 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.то есть поведение: url (PIE.htc).Попробовав различные комбинации URL с одинарными и двойными кавычками (как относительными, так и абсолютными путями), я наконец смог заставить его работать, используя несжатую версию файла "PIE_uncompressed.htc".Независимо от того, есть ли одинарная кавычка, двойная кавычка или нет кавычки, она работала для меня как для абсолютных, так и для относительных путей, когда я использовал несжатый файл.Поэтому любой относительный или абсолютный путь работал с несжатым файлом.Я также должен добавить position:relative в CSS, как показано ниже:

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

Приведенный выше CSS работал нормально, и изображение было правильно стилизовано с border-radius в IE8. Относительные пути должны быть относительно файла * .aspx, а не файла CSS.Вы также можете использовать URL-путь относительно корневого сайта.

Answer 4

Кажется, что файл PIE.htc будет распознаваться и обрабатываться только из виртуального каталога, такого как _layouts. Я попробовал все варианты из не виртуального каталога.

Answer 5

У меня была та же проблема с брендингом sharepoint 2010, и я исправил ее с помощью версии css3pie js.

1 вам нужно добавить путь jquery на вашей главной странице.

2 добавьте скрипт pie.js на свою главную страницу

3 вам нужно создать функцию js для прикрепления пирога. на вашей главной странице $(function() { if (window.PIE) { // the name of your element has the class="rounded" $('.rounded').each(function() { PIE.attach(this); }); } });

4 Сохраните и опубликуйте свою главную страницу и сценарии

Answer 6

Использование абсолютного пути в большинстве случаев работает нормально с SP2010. Мы ссылаемся на это в наших решениях SharePoint вот так, без проблем:

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

Если по какой-либо причине вы указываете на библиотеку стилей, пробел в строке, вероятно, заставит вас использовать строку в кавычках для URL-адреса поведения ... То же самое касается большинства вещей в CSS (например, имен шрифтов). с пробелами).

Единственное, о чем я могу подумать, это убедиться, что IIS обслуживает правильный тип MIME ( text / x-component ) для .HTC. Возможно, вам придется добавить его туда вручную согласно документации по известным проблемам .

Answer 7

Проверьте, полезна ли информация по этому вопросу:

CSS3 PIE - Предоставление поддержки IE пограничного радиуса не работает?

Я думаю, что этот ответ может быть полезным, но вы можете найти хорошую информацию и в других ответах.

CSS3 PIE - Предоставление поддержки границы IE не работает?