让Zurb的Foundation 3与IE7一起工作

问题描述 投票:10回答:2

已经提出了一种解决方案,以使Zurb的Foundation 3框架与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中显示。我要去哪里错了?

html css internet-explorer-7 zurb-foundation
2个回答
7
投票

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文件向下移动一个文件夹。


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]-->
© www.soinside.com 2019 - 2024. All rights reserved.