Sharepoint 2010 + CSS3Pie no funciona debido a un comportamiento incorrecto y url especificado

Question

Estoy marcando un nuevo sitio web público de Sharepoint 2010. En este sitio web, quiero usar sombras y esquinas redondeadas alrededor de varios contenedores. Primero traté de hacerlo yo mismo, pero un colega mío me habló de CSS3Pie (http://css3pie.com), que funciona muy bien.

El problema que estoy experimentando es especificar la ruta del archivo HTC. Por el momento tengo esto:

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

Esto no está funcionando correctamente en IE. Además, con

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

tampoco funciona. Además, la colocación "o" alrededor de la cadena no funciona Sin embargo, especificando la URL comportamiento de la siguiente manera:...

behavior: url(_layouts/PIE.htc); 

hace el trabajo Todos los contenedores están ahora mostrarse correctamente

pude colocar el HTC -file en la carpeta de diseños, pero prefiero no hacerlo, ya que corrompe las carpetas predeterminadas de Sharepoint con archivos personalizados.

He comprobado la página cargando con Fiddler y veo que el archivo PIE.htc devuelve un 200- código (que es bueno) en todos los casos. No importa si lo coloco en los diseños, biblioteca de estilos o raíz del sitio, siempre está devolviendo un 200.

Hay algunos problemas conocidos con CSS3Pie: http://css3pie.com/documentation/known-issues/ que dicen algo sobre las URL relativas y tal. Pensé que lo había clavado al colocar un caracter/delante de la url. También se intentó la URL de dominio completo (http://testsite.local/PIE.htc), pero eso tampoco funciona correctamente.

¿Alguna idea sobre cómo colocar el archivo htc en algún lugar del sitio Sharepoint 2010 y no en la carpeta de diseños?

Answer 1

Al trabajar con archivos .htc y SharePoint 2010 (y cualquier versión de IE después de IE7), debe estar en modo Permissive File o agregar el tipo MIME "text/x-component" a la lista AllowedInlineDownloadedMimeTypes para cada web aplicación usando PIE.

El modo permisivo es el más fácil de configurar en una aplicación web, pero también lo abre a posibles exploits si permite a los usuarios cargar contenido. (Esta es la misma razón por la que los archivos PDF no se abren en su navegador de forma predeterminada en SharePoint 2010)

Si no se permite este tipo MIME, IE descargará .htc pero se negará a ejecutar los comportamientos contenidos en el archivo (el archivo se envía con el encabezado "X-Download-Options: noopen").

Agregar el tipo mime a la aplicación web es relativamente simple a través de PowerShell.

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

Esta es una configuración por aplicación web, por lo que tendrá que hacer el cambio a cada aplicación web que va a utilizar PIE.

Hacer este cambio también le permitirá almacenar el PIE.htc dentro de una biblioteca de documentos.

-Robert

Answer 2

ver si la información sobre esta cuestión es útil:

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

Creo que esta respuesta puede ser útil, pero es posible encontrar buena información en otras respuestas también.

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

Answer 3

que tenían el mismo problema y lo arreglaron con el archivo 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); 
     }); 
    } 
} 

y luego en mi 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; 
} 

esperanza a nadie se beneficia de esto. si su cuadro desaparece cuando entra en el modo de edición, debe trabajar con la posición: relativo, como se describe en el punto anterior. esto funciona en Sharepoint 2010 y Office365 Sharepoint Online

Answer 4

El uso de una ruta absoluta parece funcionar bien en la mayoría de los casos con SP2010.Hacemos referencia a ella en nuestras soluciones de SharePoint como así, sin ningún tipo de problemas:

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

Si usted está apuntando a la biblioteca de estilos por cualquier razón, el espacio en la cadena, probablemente le obligará a tener que utilizar una cadena entre comillas para el comportamiento URL ... lo mismo ocurre con la mayoría de las cosas en CSS (por ejemplo, nombres de fuentes con espacios).

Lo único que se me ocurre es asegurarse de que IIS esté proporcionando el tipo de mime correcto (text/x-component) para el .HTC. Es posible que deba agregarlo allí manualmente según el known issues documentation.

Answer 5

tuve el mismo problema con un branding de sharepoint 2010 y lo solucioné con la versión css3pie js.

1 necesita agregar la ruta jquery en su página maestra. < script type = "text/javascript" src = "/ Scripts/jquery-1.6.2.min.js" script> </script>

2 complemento pie.js en su página principal tipo de letra = < "text/javascript" src = "/ Scripts/PIE.js"> </script>

3 necesita crear una jsfunction para adjuntar el pie. en su página principal < guión type = "text/javascript"> $(function() { if (window.PIE) { // the name of your element has the class="rounded" $('.rounded').each(function() { PIE.attach(this); }); } });

4 Guardar y publicar su página principal y Scripts

Answer 6

Parece que el archivo PIE.htc sólo se reconoce y se representa a partir de una directorio virtual como _layouts. Probé todas las variaciones desde un directorio no virtual.