Sharepoint 2010 + CSS3Pie funktioniert nicht, weil aus Verhalten und angegebene URL

Question

Ich brandmarken eine neue Sharepoint 2010 öffentlich zugängliche Website. In dieser Website möchte ich Schatten und abgerundete Ecken um mehrere Container herum verwenden. Ich versuchte es zuerst selbst, aber ein Kollege von mir erzählte mir von CSS3Pie(), was wirklich gut funktioniert.

Das Problem, das ich erfahre, gibt den Pfad der HTC-Datei an. Im Moment muss ich dies:

#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); 
} 

Dies ist nicht richtig in IE zu arbeiten. Auch mit

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

funktioniert nicht. Auch Platzierung "oder" um die Zeichenfolge nicht funktioniert jedoch das Verhalten URL wie folgt festgelegt wird:...

behavior: url(_layouts/PIE.htc); 

funktioniert Alle Container werden jetzt gemacht richtig

Ich konnte das htc platzieren -Datei im Layout-Ordner, aber ich bevorzuge es nicht, da es die Standard-Sharepoint-Ordner mit benutzerdefinierten Dateien korrumpiert.

Ich habe die Seite mit Fiddler laden überprüft und ich sehe die PIE.htc-Datei eine 200- Code (was gut ist) in allen Fällen. Es spielt keine Rolle, wenn ich es jedes Mal in den Layouts, der Stilbibliothek oder dem Root der Site platziere es gibt eine 200.

Es gibt einige bekannte Probleme mit CSS3Pie: http://css3pie.com/documentation/known-issues/, die etwas über relative URLs und so. Ich dachte, ich hätte es geschafft, indem ich ein/-Zeichen vor die URL gesetzt habe. Probieren Sie auch die vollständige Domain-URL(), aber das funktioniert auch nicht richtig.

Haben Sie Ideen, wie Sie die htc-Datei irgendwo auf der Sharepoint 2010-Site und nicht im Layout-Ordner platzieren können?

Answer 1

Wenn Sie mit .htc-Dateien und SharePoint 2010 (und einer beliebigen Version von IE nach IE7) arbeiten, müssen Sie entweder den Permissive File-Modus verwenden oder den MIME-Typ "text/x-component" für jedes Web zur AllowedInlineDownloadedMimeTypes-Liste hinzufügen Anwendung mit PIE.

Der permissive Modus ist am einfachsten in einer Web-App einzustellen, öffnet sich aber auch für potenzielle Exploits, wenn Sie Benutzern das Hochladen von Inhalten erlauben. (Dies ist der gleiche Grund, warum PDF-Dateien in Ihrem Browser in Sharepoint 2010 nicht standardmäßig geöffnet)

Wenn dieser MIME-Typ nicht zulässig ist, dann wird IE die .htc herunterladen, aber es wird sich weigern, irgendwelche Verhaltensweisen in der enthalten sind, auszuführen Datei (die Datei wird mit dem Header "X-Download-Options: noopen" gesendet).

Das Hinzufügen des MIME-Typs zur Webapp ist relativ einfach über PowerShell.

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

Dies ist eine pro-Webapp Einstellung, so dass Sie die Änderung zu jeder Webapp machen müssen, die PIE verwenden.

Durch diese Änderung können Sie PIE.htc auch in einer Dokumentbibliothek speichern.

-Robert

Answer 2

Prüfen Sie, ob die Informationen auf dieser Frage hilfreich ist:

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

Ich denke, diese Antwort nützlich sein können, aber Sie können gute Informationen in anderen Antworten als auch finden.

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

Answer 3

hatte ich das gleiche Problem und fixiert es mit der pie.js Datei:

$(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); 
     }); 
    } 
} 

und dann in meinem 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; 
} 

Hoffnung jemand daraus zugute kommt. Wenn Ihre Box verschwindet, wenn Sie in den Bearbeitungsmodus wechseln, müssen Sie mit relativer Position arbeiten, wie oben beschrieben. dies funktioniert auf Sharepoint 2010 und Office365 Sharepoint Online

Answer 4

Die Verwendung eines absoluten Pfades scheint in den meisten Fällen mit SP2010 gut zu funktionieren.Wir verweisen Sie in unseren Sharepoint-Lösungen wie so ohne Probleme:

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

Wenn Sie aus irgendeinem Grunde in der Stilbibliothek sind zeigen, ist der Raum in der Zeichenfolge werden Sie wahrscheinlich zwingen, eine Zeichenfolge in Anführungszeichen zu verwenden, für die Verhaltens-URL ... das gleiche gilt für die meisten Dinge in CSS (zB Schriftnamen mit Leerzeichen).

Die einzige andere Sache, die ich denken kann, ist sicherzustellen, dass IIS den richtigen MIME-Typ (text/x-Komponente) für die .HTC serviert. Möglicherweise müssen Sie es dort manuell hinzufügen, wie in der known issues documentation.

Answer 5

Ich hatte das gleiche Problem mit einem Sharepoint 2010 Branding und ich repariere mit der css3pie js Version.

1 Sie müssen den jquery-Pfad auf Ihrer Masterseite hinzufügen. < script type = "text/javascript" src = "/ Scripts/jquery-1.6.2.min.js"> </script>

2 Add pie.js Skript auf der Masterseite < script type = "text/javascript" src = "/ Skripte/PIE.js"> </script>

3 Sie müssen eine JFunktion erstellen, um den Kuchen anzuhängen. auf der Masterseite < script type = „text/javascript“> $(function() { if (window.PIE) { // the name of your element has the class="rounded" $('.rounded').each(function() { PIE.attach(this); }); } });

4 Speichern und Masterseite und Scripts veröffentlichen

Answer 6

Es scheint, dass nur die PIE.htc Datei erkannt und von einem gerendert wird virtuelles Verzeichnis wie _layouts. Ich habe jede Variante aus einem nicht virtuellen Verzeichnis ausprobiert.