2012-10-08 7 views
10

Eine Lösung wurde vorgeschlagen, um das Foundation Framework 3 von Zurb mit IE7 arbeiten zu lassen. Nicht unbedingt komplizierte Unterstützung, aber sicherlich Grid-Unterstützung.Making Zurb's Foundation 3 arbeiten mit IE7

Lösung vorgestellt als: http://www.stormconsultancy.co.uk/blog/development/code-snippets/making-zurb-foundation-3-work-on-ie7/

ich dies hier zu replizieren habe versucht: http://sausag.es/foundation/grid.html

Ich habe einen Link auf die htc Datei in meinem foundation.min.css hinzugefügt

Die Referenz ist relativ zum HTML, nicht zum CSS.

Ich habe eine Zeile in Htaccess über die HTC-Datei hinzugefügt.

Aber immer noch kann ich nicht das Raster in IE7 zeigen, wie es in IE8 tut. Wo gehe ich falsch?

Antwort

7

Die folgende Zeile in your stylesheet:

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

an folgende Adresse übersetzt:

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

, die ein 404. kehrt Sie dies, indem Sie die Zeile beheben könnte:

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

oder indem Sie die Datei box-sizing.htc in einen Ordner verschieben.

+2

Gesicht. Palme. Danke ACJ. Ich konnte den Wald für die Bäume nicht sehen. – user1729819

7

eine andere Lösung wäre IE7 mit bedingter Kommentare zu erkennen und dann eine CSS-Lösung für Spalten wie folgt anwenden:

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

dies löscht die Polsterung an den Säulen und fixiert das Raster. Sie können dasselbe auch für andere divs oder Teile des Layouts tun.

auch, müssen Sie die zentrierte Spalten und den offset von Spalten wie dieses Problem zu beheben:

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

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

und natürlich die bedingten Kommentare:

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

Danke !! Ich habe eine ziemlich einfach gestylte Seite, die nur eine große Anzahl von Elementen hat, und boxsizing.htc hat die Performance stark nach unten gezogen. Das ist so viel leistungsfähiger, aber erfordert einige Dinge hier und da zu beheben. –