Создание Zurb Foundation 3 с IE7

Было предложено решение сделать работу с Zurb Foundation 3 Framework с IE7. Не обязательно сложная поддержка, но, безусловно, поддержка сетки.

Решение представлено как: http://www.stormconsultancy.co.uk/blog/development/code-snippets/making-zurb-foundation-3-work-on-ie7/

Я попытался воспроизвести это здесь: http://sausag.es/foundation/grid.html

Я добавил ссылку на файл htc в свой файл foundation.min.css

Ссылка относится к HTML, а не к CSS.

Я добавил строку в htaccess о файле htc.

Но все же я не могу получить сетку для показа в IE7, как в IE8. Где я ошибаюсь?

Ответы

Ответ 1

Следующая строка в вашей таблице стилей:

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

переводит на следующий адрес:

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

который возвращает значение 404. Вы можете исправить это, изменив строку на:

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

или перемещая файл box-sizing.htc вниз по одной папке.

Ответ 2

другим решением было бы обнаружить ie7 с условными комментариями, а затем применить исправление css для таких столбцов:

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

это очищает отступы на столбцах и фиксирует сетку. вы можете сделать то же самое на других div или частях макета.

также вам нужно будет исправить центрированные столбцы и столбцы offset-by следующим образом:

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

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

и, конечно, условные комментарии:

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