10

已经提出了一种使 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

我在我的foundation.min.css 中添加了指向htc 文件的链接

引用是相对于 HTML，而不是 CSS。

我在 htaccess 中添加了一行关于 htc 文件的内容。

但是我仍然无法像在 IE8 中那样在 IE7 中显示网格。我哪里错了？

4

2 回答 2

7

样式表中的以下行：

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

转换为以下地址：

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

它返回 404。您可以通过将行更改为：

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

或将box-sizing.htc文件下移一个文件夹。

于 2012-10-08T20:10:55.870 回答
7

另一种解决方案是使用条件注释检测 ie7，然后对这样的列应用 CSS 修复：

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

这将清除列上的填充并修复网格。您可以在其他 div 或布局的一部分上执行相同的操作。

此外，您需要像这样修复居中列和偏移列：

.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]-->
于 2012-12-23T22:24:13.473 回答