Question

已提出一种解决方案，使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中显示网格。我哪里错了？

Answer 1

your stylesheet中的以下一行：

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

转换为以下地址：

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

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

来解决此问题

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

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

Answer 2

另一个解决方案是使用条件注释检测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]-->

使Zurb的基础3与IE7一起工作

2 个答案: