2012-10-08 17 views
10

Se ha propuesto una solución para hacer que el Framework 3 de Zurb funcione con IE7. Soporte no necesariamente complicado, pero ciertamente soporte de red.Haciendo que Zurb's Foundation 3 funcione con IE7

solución se presenta como: http://www.stormconsultancy.co.uk/blog/development/code-snippets/making-zurb-foundation-3-work-on-ie7/

He tratado de replicar esta aquí: http://sausag.es/foundation/grid.html

He añadido un enlace al archivo de HTC en mis foundation.min.css

El la referencia es relativa al HTML, no al CSS.

He agregado una línea en htaccess sobre el archivo htc.

Pero todavía no puedo ver la grilla en IE7 como en IE8. ¿Dónde estoy equivocado?

Respuesta

7

La siguiente línea en your stylesheet:

*behavior: url(/stylesheets/box-sizing.htc); 

se traduce en la siguiente dirección:

http://sausag.es/stylesheets/box-sizing.htc 

que devuelve un 404. Se podría solucionar este problema cambiando la línea a:

*behavior: url(/foundation/stylesheets/box-sizing.htc); 

o moviendo el archivo box-sizing.htc hacia abajo en una carpeta.

+2

cara. Palma. Gracias ACJ. No pude ver la madera para los árboles. – user1729819

7

otra solución sería detectar IE7 con los comentarios condicionales y luego aplicar una solución CSS para columnas como esta:

.ie7 .columns{ 
    margin-right: -15px ; 
    margin-left: -15px ; 
    display:-moz-inline-stack; 
    display:inline-block; 
    zoom:1; 
    *display:inline; 
} 

Esto borra el relleno en las columnas y fija la red. puede hacer lo mismo en otros divs o partes del diseño.

también, tendrá que fijar las columnas centradas y el desplazamiento por columnas como esta:

.ie7 .row{ 
    clear: both; 
    text-align: center; 
} 

.ie7 .offset-by-three { 
    margin-left:25% !important; 
} 
.ie7 .offset-by-seven { 
    margin-left:58.33% !important ; 
} 

y por supuesto los comentarios condicionales:

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> 
<!--[if IE 7]> <html class="ie7 oldie" lang="en"> <![endif]--> 
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> 
+0

¡Gracias! Tengo un sitio de estilo bastante simple que solo tenía una gran cantidad de elementos, y boxsizing.htc arrastraba el rendimiento hacia abajo. Esto es mucho mejor en cuanto a rendimiento, pero requiere arreglar algunas cosas aquí y allá. –

Cuestiones relacionadas