2012-10-08 13 views
10

Zaproponowano rozwiązanie do tworzenia Zurb's Foundation 3 Framework z IE7. Niekoniecznie skomplikowane wsparcie, ale z pewnością wsparcie sieci.Tworzenie Zurb's Foundation 3 współpracuje z IE7

Rozwiązanie jest przedstawiony jako: http://www.stormconsultancy.co.uk/blog/development/code-snippets/making-zurb-foundation-3-work-on-ie7/

Próbowałem powtórzyć ten tutaj: http://sausag.es/foundation/grid.html

Dodałem link do pliku htc w moich foundation.min.css

odniesienie jest w stosunku do HTML, a nie CSS.

Dodałem wiersz w htaccess o pliku htc.

Ale nadal nie mogę wyświetlić siatki w IE7, tak jak w IE8. Gdzie się mylę?

Odpowiedz

7

następującą linię w your stylesheet:

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

przekłada się na następujący adres:

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

która zwraca 404. Można rozwiązać ten problem poprzez zmianę wiersz:

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

lub przesuwając plik box-sizing.htc w dół o jeden folder.

+2

twarzy. Palma. Dzięki, ACJ. Nie widziałem drzewa dla drzew. – user1729819

7

Innym rozwiązaniem byłoby wykryć IE7 z komentarzy warunkowych, a następnie zastosować poprawkę css dla kolumn, takich jak ten:

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

czyści padding na kolumnach i naprawia siatkę. możesz zrobić to samo na innych elementach div lub częściach układu.

też trzeba będzie naprawić skupionych kolumny i przesunięcie po kolumnach tak:

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

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

i oczywiście komentarzach warunkowych:

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

Dziękuję! Mam dość prostą stronę, która ma po prostu dużą liczbę elementów, a boxsizing.htc przeciąga wydajność. Jest to o wiele lepsze pod względem wydajności, ale wymaga naprawy pewnych rzeczy tu i tam. –