10

ZurbのFoundation3Frameworkを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ファイルへのリンクを追加しました

参照は、CSSではなくHTMLに関連しています。

htcファイルに関する行をhtaccessに追加しました。

しかし、それでも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ファイルを1つのフォルダに移動します。

于 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 に答える