2012-10-08 17 views
10

È stata proposta una soluzione per far funzionare il Framework 3 di Zurb con IE7. Supporto non necessariamente complicato, ma certamente supporto alla rete.Fare in modo che Zurb's Foundation 3 funzioni con IE7

soluzione si presenta come: http://www.stormconsultancy.co.uk/blog/development/code-snippets/making-zurb-foundation-3-work-on-ie7/

Ho provato a replicare questo qui: http://sausag.es/foundation/grid.html

ho aggiunto un link al file htc nei miei foundation.min.css

Il il riferimento è relativo all'HTML, non al CSS.

Ho aggiunto una riga in htaccess sul file htc.

Ma ancora non riesco a visualizzare la griglia in IE7 come fa in IE8. Dove sto andando male?

risposta

7

La seguente riga nel your stylesheet:

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

traduce al seguente indirizzo:

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

che restituisce un 404. Si potrebbe risolvere questo problema modificando la linea a:

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

o spostando il file box-sizing.htc in una cartella.

+2

viso. Palma. Grazie ACJ. Non potevo vedere il legno per gli alberi. – user1729819

7

un'altra soluzione potrebbe essere quella di rilevare IE7 con i commenti condizionali e quindi applicare una correzione css per le colonne di questo tipo:

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

questo cancella l'imbottitura sulle colonne e fissa la griglia. puoi fare lo stesso su altre div o parti del layout.

anche, è necessario fissare le colonne centrate e l'offset da colonne in questo modo:

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

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

e, naturalmente, i commenti condizionali:

<!-- 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

Grazie !! Ho un sito in stile abbastanza semplice che ha solo un gran numero di elementi, e boxsizing.htc stava trascinando le prestazioni verso il basso. Questo è molto meglio per quanto riguarda le prestazioni, ma richiede di sistemare alcune cose qua e là. –

Problemi correlati