0

レスポンシブ％ベースのグリッド用のCSSテンプレートに取り組んでいます。私は以前にIE7で動作させていましたが、愚かなことをしましたが、今は動作していません。

http://danmathisen.com/lightbase-css/

現在の仕組み：

列はパーセントベースです。したがって、1/3幅の列（.col-1-3）はwidth:32%++になりmargin-left:1%ますpadding:1%。これは、ChrisCoyierのDon't OverthinkItGridsに大きく基づいています。

最近のブラウザでは、パディングはdiv幅に影響しません。しかし、IE7ではそうです。したがって.lt-ie8、1％のパディングに対応するIEクラス（）があります。.lt-ie8 .col-1-3 { width: 30%; }。したがって、30％の幅+ 1％のマージン-左+ 2％の左/右のパディング* 3-1％：first-child = 100％。右？なぜそれがIE7で機能しないのですか？

ソリューション：

私は使用できますbehavior: url(/scripts/boxsizing.htc)が、これがなくても機能するようにしたいと思っています。

または、JSを使用して幅を計算し、1pxを減算します。それでうまくいくと思いますが、理想的ではありません。

または99％の幅で落ち着きます。また、理想的ではありません。

CSSのみのソリューションが欲しいです。何かご意見は？

4

1 に答える 1

0

私はこれをテストしていませんが、あるdivを別のdivの中に入れて、内側のdivにパディングまたはマージンを設定してみてください。このようなもの：

<div style="width:33%;padding:0;margin:0;">
<div style="padding:3%;margin:3%;">
Content here
</div>
</div>

繰り返しますが、これが機能するかどうかはわかりませんが、一見の価値があります。

于 2013-01-18T19:27:48.007 に答える