已经提出了一种解决方案,以使Zurb的Foundation 3框架与IE7一起使用。不一定是复杂的支持,但是肯定是网格支持。
我尝试在这里复制此:http://sausag.es/foundation/grid.html
我在Foundation.min.css中添加了指向htc文件的链接
该引用是相对于HTML,而不是CSS。
我在htaccess中添加了有关htc文件的一行。
但是我仍然无法像在IE8中那样使网格在IE7中显示。我要去哪里错了?
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
文件向下移动一个文件夹。
另一种解决方案是使用条件注释检测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]-->